0

I am opening a new question following Rohit's answer on this question Chart.js Show labels on Pie chart

Is it possible to modify the labels with the plugin chartjs datalabels, for exemple add a unit to it?

Thanks for your answer!

EDIT:

Following Ty answer, I tried this:

if(type==='pie'){
        GraphOpt['plugins'] = {
            datalabels: {
              formatter: (item) => {
                return item + ' ' + label_unit;
              }
            }
        }
    }
    else{
        GraphOpt['tooltips'] = {
            callbacks: {
                label: (item) => `${item.yLabel} ${label_unit}`,
            }
        }
    }

but it's still not showing the units on the graph. Also, I can't get rid of the values showing on bar graphes with the plugin

EDIT2: My graph function

function setChart(Graph, ctx, type, graph_data, labels, title, label_graph, label_unit){
    
  
    var GraphOpt = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        title: {
            display:true,
            text: title,
        },
        tooltips: {},
        plugins : {}
    }


    //graph config
    var Graph_config = {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: label_graph,
                data: graph_data,
                backgroundColor: backgroundColor,
                borderColor: backgroundColor,
                borderWidth: 1
            }]
        },
        options: GraphOpt,
    }

    if(type==='pie'){
        GraphOpt['plugins'] = {
            datalabels: {
              formatter: (item) => {
                return item + ' ' + label_unit;
              }
            }
        }
    }
    else{
        GraphOpt['tooltips'] = {
            callbacks: {
                label: (item) => `${item.yLabel} ${label_unit}`,
            }
        }
    }
    


    //create a new graph if graph doesn't exist (init)
    console.log(typeof window[Graph])
    if(typeof window[Graph] === "undefined") {
        window[Graph] = new Chart(ctx, Graph_config);
        console.log(typeof window[Graph])
    //update if graph exist
    }else{
        console.log('Graph Update')
        //updating with new chart data
        window[Graph].config=Graph_config;
        window[Graph].title=title;
        //redraw the chart
        window[Graph].update();
    }
    
}
Roman Baron
  • 45
  • 1
  • 7

1 Answers1

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

ty.
  • 10,924
  • 9
  • 52
  • 71