Chart.js Show labels on Pie chart

Question

I recently updated my charts.js library to the most updated version (2.5.0). This version doesn't show the labels on the chart.

I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart exactly as in the example but still can not see the labels on the chart.

Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
              1200,
              1112,
              533,
              202,
              105,
            ],
            backgroundColor: [
              "#F7464A",
              "#46BFBD",
              "#FDB45C",
              "#949FB1",
              "#4D5360",
            ],
            label: 'Dataset 1'
        }],
        labels: [
          "Red",
          "Green",
          "Yellow",
          "Grey",
          "Dark Grey"
        ]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Doughnut Chart'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

window.pPercentage = new Chart(ChartContext, config);

Jacob · Accepted Answer · 2018-08-30T21:45:34.270

104

It seems like there is no such build in option.

However, there is special library for this option, it calls: "Chart PieceLabel".

Here is their demo.

After you add their script to your project, you might want to add another option, called: "pieceLabel", and define the properties values as you like:

pieceLabel: {
    // mode 'label', 'value' or 'percentage', default is 'percentage'
    mode: (!mode) ? 'value' : mode,

    // precision for percentage, default is 0
    precision: 0,

    // font size, default is defaultFontSize
    fontSize: 18,

    // font color, default is '#fff'
    fontColor: '#fff',

    // font style, default is defaultFontStyle
    fontStyle: 'bold',

    // font family, default is defaultFontFamily
    fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}

edited Aug 30 '18 at 21:45

answered Feb 10 '17 at 20:28

Jacob

3,598
4
35
56

I use it and it works very well. It changes it's values on filtration and do it with pretty animations. – Jacob Feb 10 '17 at 20:29
Is there any way to use this plugin in Angular2. I am using chart js in my angular 2 project : https://stackoverflow.com/a/42556725/2879146 I am importing plugin but it's not working. There's no error on console. – Hitesh Kumar Aug 01 '17 at 06:17
@HiteshKumar It doesn't look like it was made as a module. Downloading the file using npm also includes a min.js file under build/. I copied that to my public/assets/js/vendor/ folder and referenced the file from there. – Dovev Hefetz Sep 25 '17 at 11:47
piece label is a great library and should be part of the basic functionality – JollyBrackets Dec 05 '18 at 21:41
13

I would by now recommend to use https://github.com/chartjs/chartjs-plugin-datalabels. It's an official package from Chart.JS and seems to be get better support. – FranzHuber23 Apr 08 '19 at 08:42

score 23 · Answer 2 · answered Sep 10 '20 at 03:09

Use data labels plugin https://chartjs-plugin-datalabels.netlify.app/

HTML integration

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

must be loaded after the Chart.js library!

Your code will be like this

options: {
        plugins: {
            // Change options for ALL labels of THIS CHART
            datalabels: {
                color: '#36A2EB'
            }
        }
},
data: {
   datasets: [{
            // Change options only for labels of THIS DATASET
            datalabels: {
                color: '#FFCE56'
            }
   }]
}

You will see the values of datasets as a label by default if you want to override this. e.g by label

options: {
        plugins: {
            datalabels: {
                formatter: function(value, context) {
                    return context.chart.data.labels[context.dataIndex];
                }
            }
        }
}

score 2 · Answer 3 · edited Aug 18 '22 at 11:41

Use chartjs-plugin-datalabels and set the options like this

 options: {
                plugins: {
                    datalabels: {
                        formatter: function (value, context) {
                            return context.chart.data.labels[
                                context.dataIndex
                            ];
                        },
                    },
                },
            },

it will render the labels text

Chart.js Show labels on Pie chart

3 Answers3

Linked