score:26

Accepted answer

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

score:0

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

score: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',
        }
      }
}

Related Query

More Query from same tag