Open In App

How to Disable Everything on Hover in ChartJS?

Last Updated : 26 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Disabling all hover interactions in Chart.js involves configuring the chart to ignore hover events and disabling tooltips and legends. This makes sure that no visual or interactive elements respond when a user hovers over the chart. By adjusting various options and event handlers, we can turn off hover effects, making the chart static and non-interactive.

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

These are the following approaches to disable everything on hover:

Table of Content

Disabling Using plugins and hover Options

In this approach, we are using Chart.js plugin options to disable tooltips and legends while also setting the hover mode to null. This configuration prevents any hover interactions and tooltip displays, making the chart static and non-interactive.

Example: The below example disables everything on hover by using plugins and hover options.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Disable everything on Hover</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h1 {
            color: green;
            text-align: center;
        }

        h3 {
            margin-top: 0;
            text-align: center;
        }

        .chart-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: auto;
        }
    </style>
</head>

<body>
    <h3>Disabling Using plugins and hover Options</h3>
    <div class="chart-container">
        <canvas id="chart1"></canvas>
    </div>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <script>
        const ctx1 = document.getElementById('chart1').getContext('2d');
        const chart1 = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ['HTML', 'CSS', 'JavaScript', 'Python'],
                datasets: [{
                    label: 'GeeksforGeeks Tutorials',
                    data: [30, 50, 70, 40],
                    backgroundColor: ['red', 'blue', 'green', 'purple']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        enabled: false
                    },
                    legend: {
                        display: false
                    }
                },
                hover: {
                    mode: null
                }
            }
        });
    </script>
</body>

</html>

Output:

disable_onclick
Output

Disabling with Custom Handlers

In this approach, we are using custom event handlers and configuration options to disable hover interactions on the chart. By setting tooltip.enabled and legend.display to false, and configuring events to an empty array, we ensure that tooltips and legends do not display. Additionally, we use the onHover event to prevent the cursor from changing, further minimizing hover effects.

Example: The below example disables everything on hover with custom handlers.

HTML 
<!DOCTYPE html>
<html>

<head>

    <title>Disable everything on hover</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h3 {
            margin-top: 0;
            text-align: center;
        }

        .chart-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: auto;
        }
    </style>
</head>

<body>
    <h3>Disabling with Custom Handlers</h3>
    <div class="chart-container">
        <canvas id="chart3"></canvas>
    </div>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js">
    </script>
    <script>
        const ctx3 = document.getElementById('chart3').getContext('2d');
        const chart3 = new Chart(ctx3, {
            type: 'pie',
            data: {
                labels: ['React', 'Angular', 'Vue', 'Svelte'],
                datasets: [{
                    label: 'GeeksforGeeks Frameworks',
                    data: [35, 25, 20, 20],
                    backgroundColor: ['cyan', 'magenta', 'yellow', 'black']
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    tooltip: {
                        enabled: false
                    },
                    legend: {
                        display: false
                    }
                },
                events: [],
                onHover: (event) => {
                    event.native.target.style.cursor = 'default';
                },
                hover: {
                    mode: null
                }
            }
        });
    </script>
</body>

</html>

Output:

disable_onclick2
Output

Next Article
How to Fix "Bar Chart Showing Old Data when Hovering" in ChartJS?

G
gpancomputer
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox