[Chartjs]-Chart.js – how to disable everything on hover

In order to remove all hover styles/tooltips from vanilla chart.js:

var myChart = new Chart(canvas, {
    options: {
        tooltips: {enabled: false},
        hover: {mode: null},
    }
    ...
});

Chart.js is watching all mousemove events on the canvas within which it has instantiated your chart. Setting hover ‘mode’ to null seems to override all the ways the canvas looks for matching elements to assign activated :hover classes to.

The tooltip event seems separate, so I had to use both lines to make the chart effectively static.

Note, initial animations still work on a chart with these options.

UPDATE: newest Chart.js has re-bundled the way hover is ‘listened’ for:

var myChart = new Chart(canvas, {
    options: {
        events: []
    }
    ...
});

Making the ‘events’ option an empty list (instead of ['click', 'hover', etc]) makes the chart blind'/static because it will be listening for no events.

just use

options: {
        events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
       
    }

just remove one of them, which you want to remove.

options: {
        events: ["mouseout", "click", "touchstart", "touchmove", "touchend"],
       
    }

There’s another option:

        states: {
            hover: {
                filter: {
                    type: 'none',
                }
            },
        },

As of 2020

Simply put tooltips: false in your options object

You can try the following:

const options = {
    ...
    tooltips:{
      enabled:false
    },
    ...
}

In my case, I needed to disable only the hover background color changing, maintaining tooltips

    options: {
    hover: {mode: null},
}

if you don’t need tooltips you can choose this option

    options: {
    tooltips: {enabled: false},
    hover: {mode: null},
}

If what you want is prevent any effect when hovering the mouse over any series, you should disable tooltip and hover state. You can do it like this:

$(function () {

    Highcharts.chart('container', {
        plotOptions: {
        	series: {
            states: {
                      hover: {
                          enabled: false
                      }
                  }
          }
        },

        tooltip: {
            enabled: false
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
    background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>

(Template taken from Highcharts documentation).

Hope it helps 🙂