How to Add Tooltip Line Breaks in ChartJS?

Last Updated : 21 Aug, 2024

Chart.js tooltips are used to provide additional information about data points when a user hovers over them. By default, tooltips display information in a single line, but you can customize them to include line breaks for better readability or to present more complex data. This customization can be achieved through various callback functions, allowing you to format the tooltip content with new lines or additional details.

Chart.js CDN link

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

These are the following ways to add Tooltip line breaks:

Table of Content

Using Array for Multiple Lines in Tooltips
Using Footer Callback

Using Array for Multiple Lines in Tooltips

In this approach, we are using an array within the tooltip's label callback function in Chart.js to display multiple lines of text in the tooltip. Each item in the array corresponds to a separate line, allowing us to include additional contextual information, such as the programming language, number of tutorials, and the source.

Syntax:

plugins: {
    tooltip: {
        callbacks: {
            label: function(context) {
                return [
                    'Line 1: ' + context.label,
                    'Line 2: ' + context.raw,
                    'Line 3: Additional info'
                ];
            }
        }
    }
}

Example: The below example uses Array for Multiple Lines in Tooltips.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Tooltip line break</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

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

<body>
    <h3>Using Array for Multiple Lines in Tooltips</h3>
    <canvas id="chart2"></canvas>

    <script>
        const data2 = {
            labels: ['JavaScript', 'Python', 'Java', 'C++'],
            datasets: [{
                label: 'Tutorials Published',
                data: [300, 400, 350, 280],
                backgroundColor: '#2196f3',
                borderColor: '#1976d2',
                borderWidth: 1
            }]
        };

        const config2 = {
            type: 'bar',
            data: data2,
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                return [
                                    'Language: ' + context.label,
                                    'Tutorials: ' + context.raw,
                                    'Source: GeeksforGeeks'
                                ];
                            }
                        }
                    }
                }
            }
        };

        const chart2 = new Chart(
            document.getElementById('chart2'),
            config2
        );
    </script>
</body>

</html>

Output:

In this approach, we are using the footer callback in the Chart.js tooltip configuration to customize the tooltip's footer content. By using the footer callback, we can add additional details or formatting to the tooltip, such as displaying a custom message on a new line.

Syntax:

options: {
    plugins: {
        tooltip: {
            callbacks: {
                footer: function(tooltipItems) {
                    // footer content
                    return 'Custom footer content';
                }
            }
        }
    }
}

Example: The below example uses Footer Callback to add Line Breaks in Chartjs Tooltip.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Tooltip line break</title>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
        }

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

<body>
    <h3>Using `footer` Callback</h3>
    <canvas id="lineChart2"></canvas>

    <script>
        const data2 = {
            labels: ['May', 'Jun', 'Jul', 'Aug'],
            datasets: [{
                label: 'Expenses',
                data: [100, 150, 200, 250],
                borderColor: '#2196f3',
                fill: false
            }]
        };

        const config2 = {
            type: 'line',
            data: data2,
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        callbacks: {
                            footer: function (tooltipItems) {
                                return tooltipItems.map(item => 
                                 'Details: ' + item.raw).join('\n');
                            }
                        }
                    }
                }
            }
        };

        const lineChart2 = new Chart(
            document.getElementById('lineChart2'),
            config2
        );
    </script>
</body>

</html>

Output:

How To Remove Line Chart Fill in ChartJS?

gpancomputer

Improve

Article Tags :

How to Add Tooltip Line Breaks in ChartJS?

Chart.js CDN link

Using Array for Multiple Lines in Tooltips

Syntax:

Using Footer Callback

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?