Question

108

ChartJS: datalabels: show percentage value in Pie piece

rated 0 times [ 114] [ 6] / answers: 1 / hits: 136097 / 6 Years ago, mon, august 27, 2018, 12:00:00

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/)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 6 Years ago adriannemyiag · Accepted Answer

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

});