ChartJS: datalabels: show percentage value in Pie piece

by

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
});

More Related Contents:

  1. Dynamically update values of a chartjs chart
  2. Click events on Pie Charts in Chart.js
  3. How to put rounded corners on a Chart.js Bar chart
  4. How to clear a chart from a canvas so that hover events cannot be triggered?
  5. Limit labels number on Chart.js line chart
  6. How to set ChartJS Y axis title?
  7. Remove x-axis label/text in chart.js
  8. Chart.js v2: How to make tooltips always appear on pie chart?
  9. How to change colours for Angular-Chart.js
  10. JavaScript Chart Library
  11. How to display data values on Chart.js
  12. How to add text inside the doughnut chart using Chart.js?
  13. Google Bar Chart cannot Change Individual Bar Color
  14. How do you create a family tree in d3.js?
  15. Chart.js — drawing an arbitrary vertical line
  16. I want to change the chart for each city or subcity selected
  17. How to add two Google charts on the one page?
  18. variable background colors in google line chart
  19. Destroy chart.js bar graph to redraw other graph in same
  20. Chart.js – draw horizontal line
  21. How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
  22. Highcharts percentage of total for simple bar chart
  23. chart.js Failed to create chart: can’t acquire context from the given item
  24. Chartjs Bar Chart showing old data when hovering
  25. Custom Legend with ChartJS v2.0
  26. How to add images as labels to Canvas Charts using chart.js
  27. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  28. ng2-charts update labels and data
  29. Chart.js Line, different fill color for negative point
  30. How do I put this on Real-Time? I already put (async: True) but it doesnt work

Leave a Comment