Chart.js Show labels on Pie chart

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

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