How to use Legend Option In JavaScript

Include the Chart.js library in the HTML file using a CDN.
Then define a new Chart() instance with the type set to ‘pie’.
After that use the legend option within the options object to display the legend.
For customize the legend labels using the labels.generateLabels callback function.
And inside the callback function, map over the chart data labels for generate legend labels based on the dataset values.

Example: The below example shows the implementation of above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Pie Chart with Legend Labels
    </title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, 
                Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            width: 100%;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            text-align: center;
        }

        h1 {
            color: #e74c3c;
            margin-bottom: 20px;
        }

        canvas {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>
            Show the labels on Pie chart 
            using Legend in Chart.js
        </h1>
        <canvas id="myPieChart" width="400" 
            height="400">
        </canvas>
    </div>
    <script>
        document.addEventListener
            ("DOMContentLoaded", function () {
                var ctx = document.getElementById
                    ('myPieChart').getContext('2d');
                var myPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels:
                            ['Red', 'Blue', 'Yellow',
                                'Green', 'Purple', 'Orange'],
                        datasets: [{
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'red',
                                'blue',
                                'yellow',
                                'green',
                                'purple',
                                'orange'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        plugins: {
                            legend: {
                                display: true,
                                labels: {
                                    generateLabels: function (chart) {
                                        return chart.data.labels.
                                            map(function (label, i) {
                                                let backgroundColor = chart.data.
                                                    datasets[0].backgroundColor[i];
                                                return {
                                                    text: label + ': ' + chart.data.
                                                        datasets[0].data[i],
                                                    fillStyle: backgroundColor
                                                };
                                            });
                                    }
                                }
                            }
                        }
                    }
                });
            });
    </script>
</body>

</html>

Output:

How to Show Labels on Pie Chart in ChartJS ?

Pie charts are an attractive way to represent data in an easy-to-understand manner. In the pie chart, the labels are very useful because, with the help of the labels, we can understand what type of data is represented in the chart.

Below are the different approaches to show labels on a pie chart:

Table of Content

Using plugins
Using Looltip Label
Using Legend Option

How to use Legend Option In JavaScript

How to Show Labels on Pie Chart in ChartJS ?

Similar Reads