Open In App

How To Remove Square Label From Tooltip And Make Its Information In One Line In ChartJS?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
2 Likes
Like
Report

Square labels from tooltips are used in Chart.js to display colour indicators alongside data points, which can sometimes clutter the tooltip. To enable the tooltip and present information in a single line, you can customize the tooltip using callbacks to format the content and remove the colour boxes. 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

These are the following approaches to remove square label from tooltip and make its information in one line :

Table of Content

Approach 1: Using Custom Tooltip Callbacks

In this approach, we are using Chart.js custom tooltip callbacks to format the tooltip display. The label callback function formats the tooltip content to show the label and value on one line, while the title callback function is left empty to remove the title. The displayColors option is set to false to hide the color box in the tooltip.

Example: The example below uses Custom Tooltip Callbacks to remove a square label from the tooltip and put its information in one line in ChartJS.

HTML 
<!DOCTYPE html>

<head>
    <title>
        Example 1
    </title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        h1 {
            color: green;
        }

        canvas {
            max-width: 400px;
            max-height: 300px;
            margin: 0 auto;
        }
    </style>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h3> Approach 1: Using Custom Tooltip Callbacks </h3>
    <canvas id="chartCanvas">
    </canvas>
    <script>
        window.onload = function () {
            var ctx = document.getElementById('chartCanvas').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['January', 'February', 'March'],
                    datasets: [{
                        label: 'GeeksforGeeks Data',
                        data: [10, 20, 30],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function (tooltipItem) {
                                    return tooltipItem.label + ': ' + tooltipItem.raw;
                                },
                                title: function () {
                                    return;
                                }
                            },
                            displayColors: false
                        }
                    }
                }
            });
        };
    </script>
</body>

Output

1
Remove Square Label From Tooltip And Make Its Information In One Line In ChartJS

Approach 2: Using Tooltip with BeforeBody Callback

In this approach, we are using the label callback function in Chart.js to format the tooltip content so that it displays information in one line. We also disable the color box by setting displayColors to false and remove unnecessary tooltip elements with title and beforeLabel callbacks

Example: The below example uses Tooltip with BeforeBody Callback to remove square label from tooltip and make its information in one line in ChartJS.

HTML 
<!DOCTYPE html>

<head>
    <title>
        Approach 2
    </title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        h1 {
            color: green;
        }

        canvas {
            max-width: 400px;
            max-height: 300px;
            margin: 0 auto;
        }
    </style>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
</head>

<body>
    <h1>
        GeeksforGeeks
    </h1>
    <h3> Approach 2: Using Tooltip with BeforeBody Callback </h3>
    <canvas id="chartCanvas">
    </canvas>
    <script>
        window.onload = function () {
            let ctx = document.getElementById('chartCanvas').getContext('2d');
            let myChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow'],
                    datasets: [{
                        label: 'GeeksforGeeks Data',
                        data: [20, 30, 40],
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgb(255, 99, 132)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    return context.label + ': ' + context.raw;
                                },
                                title: function () {
                                    return;
                                },
                                beforeLabel: function () {
                                    return;
                                }
                            },
                            displayColors: false
                        }
                    }
                }
            });
        };
    </script>
</body>

Output

2
Remove Square Label From Tooltip And Make Its Information In One Line In ChartJS

G

gauravggeeksforgeeks
Improve
Article Tags :

Explore

Lightbox