Chart.js Show labels in a pie chart

Question

I recently upgraded my charts.js library to the most updated version (2.5.0). This version does not display labels on the chart.

I have an example of working on a violinist: http://jsfiddle.net/g6fajwg8 .

However, I defined my chart in exactly the same way as in the example, but still do not see the label on the chart.

Note. Google and Stackoverflow have many such questions, but most of them relate to previous versions that work well for 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 that there is no such option in the assembly.

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

Here is their demo .

After you add their script to your project, you may want to add another option called: "pieceLabel" and define the property 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" }