I have a piechart with four labels:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
Using chartjs-plugin-datalabels
plugin I wanted to show percentage value in each Pie piece with below code:
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = 0;
datasets.map(dataset => {
sum += dataset.data[ctx.dataIndex];
});
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return percentage;
}
},
color: '#fff',
}
I am getting 100% value for all the pie pieces, instead of respective percentages. Here is the JSFiddle (https://jsfiddle.net/kingBethal/a1Lvn4eb/7/)
To display pie chart data values of each slice in Chart. js and JavaScript, we can use the chartjs-plugin-labels plugin. to add the script tags for Chart. js, the plugin, and the canvas for the chart.
To display percentage values as labels on a pie chart The data labels should appear within each slice on the pie chart. On the design surface, right-click on the labels and select Series Label Properties. The Series Label Properties dialog box appears. Type #PERCENT for the Label data option.
On the Format tab, in the Current Selection group, click Format Selection. Click Series Options, and then under Doughnut Hole Size, drag the slider to the size that you want, or type a percentage value between 10 and 90 in the Percentage box. For our doughnut chart, we used 20%.
Right click the pie chart again and select Format Data Labels from the right-clicking menu. 4. In the opening Format Data Labels pane, check the Percentage box and uncheck the Value box in the Label Options section. Then the percentages are shown in the pie chart as below screenshot shown.
Updated fiddle with 2 decimal precision.
You were not computing the sum, instead storing the current value in sum only for every value.
Here is the working fiddle : https://jsfiddle.net/a1Lvn4eb/55/
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
var options = {
tooltips: {
enabled: false
},
plugins: {
datalabels: {
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 percentage;
},
color: '#fff',
}
}
};
var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: data
},
options: options
});
I like to add a little in accepted answer,
ctx.chart.data.datasets[0].data
always gives you entire data even if you filter out some data by clicking on legend, means you will always get same percentage for a country even if you filter out some countries.
I have used context.dataset._meta[0].total
to get the filtered total.
Here is the working snippet:
var data = [{
data: [50, 55, 60, 33],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#d21243",
"#B27200"
],
borderColor: "#fff"
}];
var options = {
tooltips: {
enabled: true
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = ctx.dataset._meta[0].total;
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
}
};
var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['India', 'China', 'US', 'Canada'],
datasets: data
},
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="pie-chart"></canvas>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With