Chart.JS: Show custom labels permanentely on doughnut chart

0
votes

How can I show custom labels permanently in a Chart.JS doughnut chart using chartjs-plugin-datalabels?

The example looks now like this:

enter image description here

Under https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation, I found that the following code should change the labels to custom formatting:

formatter: function(value, context) {
    return context.dataIndex + ': ' + Math.round(value*100) + '%';
}

Why doesn't this work in the example fiddle: https://jsfiddle.net/o4kyt69j/1/?

1
javascriptchart.js

1 Answers

0
votes

Okay, I didn't read properly...

Here's the solution: https://jsfiddle.net/o4kyt69j/2/

The code should be:

options: {
    plugins: {
        datalabels: {
            formatter: function(value) {
                return value + " kWh";
            }
        }
    }
}