chartjs datalabels change font and color of text displaying inside pie chart
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
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',
}
}
}
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