Change the font size/color of the values displayed inside the pie chart using chartjs

[nraksha29]

Can the font size/color of the values displayed inside the pie chart be changed which is built using Chart.js?

[Udemology]

Hi @nraksha29,

Are you building it custom or use a plugin and which plugin? That will be helpful in answering this question.

[nraksha29]

Hi @Udemology ,
I have used chartjs library to display the chart and chartjspluginlabels plugin for displaying the values inside the chart. Below is the code used to print the values on the chart.
options: {
responsive: true,
plugins: {labels:{render:(args)=>{
return args.value;
}}},
}

[Udemology]

I had an old video that would be helpful for you. This video covers the plugin since the plugin has 2 versions almost identical but one was upgraded to support newer versions of Chart.js 3 at the time of the video. Might now also support Chart.js 4: https://youtu.be/xpN394MAhPA

But the code below should specifically change the 2 items you need, you just need to add your render namespace as well in the code below:

plugins: {
  labels: {
        render: (args) => {
          return args.value;
        },
        
        // font size, default is defaultFontSize
        fontSize: 12,
 
        // font color, can be color array for each data or function for dynamic color, default is defaultFontColor
        fontColor: '#fff',
  }
}