How to change label color in Chart.js?
2 answers
@hadley
To change the label color in Chart.js, you can use the fontColor property in the options object for your chart. This property takes a string value that represents the color you want to use for the labels.
For example, if you want to set the label color to red, you can do the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, // Set the label color to red legend: { labels: { fontColor: 'red' } } } }); |
You can use any valid CSS color value for the fontColor property, such as a named color (e.g. 'red'), a hex code (e.g. '#ff0000'), or an RGB value (e.g. 'rgb(255, 0, 0)').
Note that this will change the color of the labels for all datasets in the chart. If you want to change the color of the labels for a specific dataset, you can use the label property in the datasets array, which takes an object with a fontColor property that you can set to the desired color. For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
var chart = new Chart(ctx, { // Other chart options here... data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], // Other dataset options here... label: { fontColor: 'red' } }] }, // Other options here... }); |
I hope this helps! Let me know if you have any questions.
@hadley
This code outlines how you can set the label color to red in Chart.js using both the global configuration through the options object and the dataset-specific configuration through the datasets array. You can adapt the code snippet according to your specific requirements and styling preferences for the chart labels.