[Chartjs]-Chartjs datalabels change font and color of text displaying inside pie chart

by

32👍

✅

I use Chart js and datalebels to, and can do this like this:

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

Of course in my example i add the ‘%’, thats why i use that function in formatter.

Remember that ‘plugins’ is part of ‘options’ in the chart.

Here is the page of the plugin datalabels with more things you can do

4👍

If you want to change font family then you can do like this:

add font-family e.g adding ‘Josefin Sans’ font family

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">

and then mention family: 'Josefin Sans' in the font JSON object. like this:-

plugins: {
      datalabels: {
        color: #ffffff,
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
          family: 'Josefin Sans',
        }
      }
}

3👍

To change the color for each data set you can use

{
   data: {
datasets: [
{
  datalabels: {
    labels: {
      value: {
        color: 'green'
      }
    }
  }
}]
}

Found it helpful https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#dataset-overrides

0👍

In my case to make it work I had to add quotes to the color value:
color: "#ffffff",

plugins: {
      datalabels: {
        color: "#ffffff",
        formatter: function (value) {
          return Math.round(value) + '%';
        },
        font: {
          weight: 'bold',
          size: 16,
        }
      }
    }

0👍

Continue from answered Dec 28, 2018 at 11:41
Sandy Veliz
67088 silver badges16

If you are still not able to see the value add another plugins outside the options like this plugins: [ChartDataLabels]

Now you will have 2 plugins, one inside and another one outside as stated above

Also ensure you have the right script files imported in the correct order since the second one required the first scrip file before;

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

Leave a comment