Chartjs-Add a unit to label with chartjs plugin datalabels

2👍

Yes, have a look at the chartjs-plugin-datalabels documentation. In particular, you want to use the options.plugins.datalabels.formatter option to specify a custom function and append units to every label string.

Here’s an example Chart.js config that adds a unit to every data label:

{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [84, 28, 57, 97],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(255, 159, 64)',
          'rgb(255, 205, 86)',
          'rgb(75, 192, 192)',
        ],
        label: 'Dataset 1',
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green'],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (val) => {
          return val + ' kg';
        }
      }
    }
  }
}

data label with units

Leave a comment