I am currently using ChartJS in my React application to display data on a pie chart. My requirement is to display both the number and percentage values on each slice of the chart (e.g. 5(6.7%)). However, with the existing code, I am only able to show the percentage value. Can anyone provide guidance on how I can achieve this dual display? Thank you.
const data = {
labels: ['America', 'China', 'Dubai', 'India'],
datasets: [
{
label: 'Work Orders',
data: [10, 50, 5, 2],
backgroundColor: [
'#00CF9B',
'#E55B5E',
'#FFD366',
'#5A9ED4',
],
borderWidth: 0,
},
],
};
const options = {
plugins: {
legend: {
position: 'right'
},
datalabels: {
color: 'black',
font: {
weight: 'bold'
},
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return `${value}(${percentage})`;
},
}
}
}
<Pie data={data} options={options} />