Charter Custom Datalabels

[nathan179 (Nathan)]

Hi All,

Has anyone successfully implemented a custom data label for Charter?

Ive been playing around with piecharts and have been able to get the tooltip to display the percentage value using the following call back code.

callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var meta = dataset._meta[Object.keys(dataset._meta)[0]];
var total = meta.total;
var currentValue = dataset.data[tooltipItem.index];
var percentage = parseFloat((currentValue/total*100).toFixed(1));
return currentValue + ’ (’ + percentage + ‘%)’;
},
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index];
}
}

However, I’m not sure how to adapt this to a data-label in order to display the percentage value instead of the number value in the csv. Has anyone managed to get this to work?

[Fuellemann (Jan Fuellemann)]

A question for @habitualshaker

[habitualshaker (Stuart Marshall)]

Charter uses the chartjs datalabels plugin and you can find info about customising the labels here: https://chartjs-plugin-datalabels.netlify.app/guide/formatting.html

Try:

formatter: (value, context) => {
        let sum = context.dataset._meta[0].total;
        let percentage = (value * 100 / sum).toFixed(1) + "%";
        return percentage;
      }