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

Answer 1

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" } 

Answer 2

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

HTML integration

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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];                 }             }         } }