How to add prefix or suffix to tooltip label ?

Last Updated : 29 Jan, 2024

A Tooltip is the animated dialogue box that appears on any point in a chart when hovering on it to provide more information on that point in the chart. The default label of the tooltip produced by chart.js is much more limited, but we can easily modify that by prepending or appending a prefix or suffix respectively.

The options.plugins.tooltip.callbacks function allows you to tweak what shows up in the tooltip. So, you can easily add something extra before or after the default info, making your tooltips more helpful and personalized.

Label Callback Function

It can change the text displayed in the tooltip for every dataset or item of the chart. It accepts every TooltipItem object of the chart and produces the text to be rendered for the item.

Name	Arguments	Return type	Dataset Override	Description
label	TooltipItem	string \| string[] \| undefined	Yes	Returns the text for every tooltip item to be displayed in the tooltip box

Example 1: This example will display the sales of a product in two different years. To display the amount we will add the currency symbol as a prefix and the decimal point as a suffix. It will utilize the label function of the chart.js to produce the text for every item.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Prefix, Suffix in ChartJS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js">
    </script>
   
    <style>
        * {
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        }
    </style>
</head>
   
<body>
    <div>
        <h1 style="color: green; text-align: center">GeeksforGeeks</h1>
 
        <h3 style="text-align: center">
            Prefix, Suffix for tooltip labels in Chart.js
        </h3>
 
        <div>
            <canvas id="chartID"></canvas>
        </div>
    </div>
 
    <script>
        // chart object
        new Chart($("#chartID"), {
            // line chart
            type: "line",
            data: {
                // x-axis labels
                labels: ["January", "February", "March", "April", "May", "June"],
                datasets: [
                    // dataset 1
                    {
                        label: "SALES 2022",
                        // y-axis data
                        data: [65, 71, 62, 81, 34, 55], // End data
                        borderColor: "green",
                        backgroundColor: "rgba(0, 128, 0, 0.5)",
                        pointRadius: 7,
                        tension: 0.2,
                        pointStyle: "circle",
                    },
                    // dataset 2
                    {
                        label: "SALES 2023",
                        data: [55, 50, 40, 34, 79, 45],
                        borderColor: "blue",
                        backgroundColor: "rgba(0, 0, 255, 0.5)",
                        tension: 0.2,
                        pointRadius: 7,
                        pointStyle: "circle",
                    },
                ],
            },
            options: {
                plugins: {
                    tooltip: {
                        enabled: true,
                        mode: "point",
                        position: "nearest",
                        callbacks: {
                            afterBody: (context) => {
                                return "\nThis is a tooltip to explain"+
                                       " \nthe usage prefix and suffix.";
                            },
                            // custom label callback function
                            label: function (context) {
                                // prefix for tooltip label
                                // suffix for tooltip label
                                let prefix = "₹:";
                                let suffix = ".00 rupees";
                                let label = 
                                    `${prefix} ${context.parsed.y}${suffix}`;
 
                                return label;
                            },
                        },
                    },
                },
            },
        });
    </script>
</body>
 
</html>

Output:

example_output_1_adding_prefix_suffix_tooltip_chartsjs

Example 2: We will see a chart about marks of two different student, we will prepend their name in the prefix of the tooltip label. Also, we will append the result(Pass, Fail) based on their marks in the suffix of the tooltip label.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Prefix, Suffix in ChartJS</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js">
    </script>
 
    <style>
        * {
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        }
    </style>
</head>
 
<body>
    <div>
        <h1 style="color: green; text-align: center">GeeksforGeeks</h1>
 
        <h3 style="text-align: center">
            Prefix, Suffix for tooltip labels in Chart.js
        </h3>
 
        <div>
            <canvas id="chartID"></canvas>
        </div>
    </div>
 
    <script>
       
        // Chart object
        new Chart($("#chartID"), {
           
            // Line chart
            type: "line",
            data: {
                labels: ["I sem", "II sem", "III sem", "IV sem", "V sem", "VI sem"],
                datasets: [
                    // Dataset 1
                    {
                        label: "Harry",
                        data: [55, 45, 60, 45, 89, 67],
                        borderColor: "green",
                        backgroundColor: "rgba(0, 128, 0, 0.5)",
                        pointRadius: 7,
                        tension: 0.2,
                        pointStyle: "circle",
                    },
                   
                    // Dataset 2
                    {
                        label: "Hermione",
                        data: [99, 90, 95, 89, 99, 100],
                        borderColor: "blue",
                        backgroundColor: "rgba(0, 0, 255, 0.5)",
                        tension: 0.2,
                        pointRadius: 7,
                        pointStyle: "circle",
                    },
                ],
            },
            options: {
                plugins: {
                    tooltip: {
                        enabled: true,
                        mode: "point",
                        position: "nearest",
                        callbacks: {
                            afterBody: (context) => {
                                return "\nThis is a tooltip to explain "+
                                       "\nthe usage prefix and suffix.";
                            },
                           
                            // Custom label callback function
                            label: function (context) {
                               
                                // Prefix containing the student label
                                let prefix = `${context.dataset.label} got`;
                               
                                // Suffix computed pased on their marks
                                let suffix = 
                                    `marks! : ${context.parsed.y >= 50 ? "PASS" : "FAIL"
                                    }`;
                               
                                // Add my custom prefix and suffix set
                                // context.parsed.y is the value of y-axis
                                let label = `${prefix} ${context.parsed.y} ${suffix}`;
                                return label;
                            },
                        },
                    },
                },
            },
        });
    </script>
</body>
 
</html>