How to use Looltip Label In JavaScript

At first set up the basic HTML and CSS structure .
After that create a canvas element where the Pie chart will be rendered.
Then add options to the chart configuration and inside the options object, define the tooltips property.
And the tooltips take’s a callback so inside the tooltips object, define the callbacks property then define the label function to customize the tooltip label.

Syntax:

new Chart(ctx, {
    type: "pie",
    data: {},
    options: {
            tooltip: {
            callbacks:{
                // Tooltip config options
            },
        },
    },
});

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 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 in Chart.js
        </h1>
        <canvas id="myPieChart" width="400" 
            height="400">
        </canvas>
    </div>
    <script>
        document.addEventListener
            ("DOMContentLoaded", function () {
                let ctx = document.getElementById
                    ('myPieChart').getContext('2d');
                let myPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: {
                        labels:
                            ['Red', 'Blue', 'Yellow',
                                'Green', 'Purple', 'Orange'],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            backgroundColor: [
                                'red',
                                'blue',
                                'yellow',
                                'green',
                                'purple',
                                'orange'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    let label = data.labels[tooltipItem.index];
                                    let value = data.datasets
                                    [tooltipItem.datasetIndex].
                                        data[tooltipItem.index];
                                    return label + ': ' + value;
                                }
                            }
                        }
                    }
                });
            });
    </script>
</body>

</html>

Output:

Output : Using Tooltip

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 Looltip Label In JavaScript

Syntax:

How to Show Labels on Pie Chart in ChartJS ?

Similar Reads