How to change the label color in chart.js?

Question

I have a pie chart defined like so,

var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 206, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)',
                'rgb(255, 159, 64)',
                'rgb(204, 255, 64)',
                'rgb(64, 159, 255)',
                'rgb(175, 64, 255)'
                ],
                options: {
                    responsive : true,
                }
            }],
            fontColor : '#FFFFFF'

        }
    });

how the chart looks,

This however is setting the font color of the labels to black, how can I change this color. Any pointers on this is highly appreciated. Thanks!

did you take a look at https://stackoverflow.com/questions/22513023/change-label-font-color-for-a-line-chart-using-chart-js ? — , Jul 17 '17 at 09:06

ɢʀᴜɴᴛ · Accepted Answer · 2017-07-17T09:26:48.123

You can change the font color of legend's label, in the following way ...

options: {
   legend: {
      labels: {
         fontColor: 'white'
      }
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var chart = new Chart(ctx, {
   type: 'doughnut',
   data: {
      labels: ['A', 'B', 'C', 'D', 'E'],
      datasets: [{
         data: [1, 1, 1, 1, 1],
         backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 206, 86)',
            'rgb(75, 192, 192)',
            'rgb(153, 102, 255)'
         ]
      }]
   },
   options: {
      legend: {
         labels: {
            fontColor: 'white' //set your desired color
         }
      }
   }
});

canvas{background: #222}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Daniel Sihaloho · Answer 2 · 2022-07-14T08:43:03.383

1

To change label color with Chart.js, you must set the fontColor.

to set the fontColor of the labels by setting the fontColor in the options object property.

for example;

    fontColor: "white", // set color

or you can visit the following link : https://thewebdev.info/2022/06/27/how-to-change-label-color-with-chart-js-and-javascript/

edited Jul 14 '22 at 08:43

answered Jul 14 '22 at 08:29

Daniel Sihaloho

11
2

score 1 · Answer 3 · edited Oct 25 '22 at 09:34

1

The only solution i found to work for this problem is the following line

Chart.defaults.color = '#fff';

Hope it helps

edited Oct 25 '22 at 09:34

pmatatias

3,491
3
10
30

answered Oct 18 '22 at 20:10

Cliff

56
4

my context was chartjs in revealjs, and this worked for me – Ingvald Apr 26 '23 at 08:33

score 0 · Answer 4 · answered Oct 16 '21 at 11:35

Sorry to unbury this but trying any solutions and only this works. create plugin before chart :

Chart.plugins.register({
    beforeDraw: function(c) {
        c.legend.options.labels.fontColor = 'hsl(0,0%,85%)';
    }
});
var chart = new Chart(ctx, {
....

How to change the label color in chart.js?

4 Answers4

Linked