How to Hide/Disable Tooltips Chart.js ?

Last Updated : 13 Jan, 2024

Tooltips provide additional information when hovering over data points, but in some cases, you may want to turn them off for a cleaner and more focused chart presentation. We will discuss how can we Hide/disable the tooltip in Chart.js.

CDN link:

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Approach: Using the tooltips Configuration Option

In this method, you can use the tooltips configuration option to control the behavior of tooltips. By setting the enabled property to false, you can effectively disable tooltips for the entire chart.

Syntax:

options: {
        plugins: {
          tooltip: {
            enabled: false, // Disable tooltips
          }
        }
      }

Example: We have used tooltip configuration to hide/disable the tooltip by setting the enabled property to false.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Chart.js Tooltip Example</title>
 
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
 
<body>
    <div style="width: 80%; margin: auto;">
        <canvas id="myChart"></canvas>
    </div>
 
    <script>
        const config = {
            type: 'bar',
            data: {
                labels: ['January', 'February', 'March',
                    'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My Dataset',
                    data: [10, 25, 18, 32, 20, 15, 28],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    tooltip: {
                        enabled: false, // Disable tooltips
                    }
                }
            }
        };
 
        const ctx = document.getElementById('myChart')
            .getContext('2d');
        new Chart(ctx, config);
    </script>
</body>
 
</html>