Chart.js - how to disable everything on hover

Question

How can I set the code that there will be no hover effects, hover options, (hover) links etc on chart?

I'm using chart.js. Below is my code, where I set pie chart.

Html..

<div id="canvas-holder" style="width:90%;">
    <canvas id="chart-area" />
</div>

..and js...

$(document).ready(function () {


                var config = {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [60,20],
                            backgroundColor: [
                                "#ddd",
                                "#58AC1C"
                            ],

                            label: 'Dataset 1'
                        }],
                        labels: [
                            "Bla1 ",
                            "Bla2 "+
                        ]   
                    },
                    options: {
                        responsive: true
                    }
                };


                window.onload = function() {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx, config);
                };      
            });

Graycegrayheaded

You wanted to disable hover effect or disable something on hover? – Moderation

what about :hover for #chart-area{} – Bullhead

I've tried to linked this site to mobile app. It opens ok and it's responsive and everything is fine. The problem is when a "tap" anywhere in the screen.. Then page reloads (basically it opens another one).. If I remove div with #canvas-holder (so the chart isn't displayed) everything is ok.. other text is displayed ok and I can tap anywhere I want and nothing happens.. – Graycegrayheaded

Answer 1

You can try:

 showTooltips: false

You can also use the following link:

http://jsfiddle.net/TZq6q/298/

Puree

I've added this, but it didn't solve my problem. Example you put in fiddle was useful.. I've customize it for my data and style, and I think that this is it.. I am testing it and so far it looks like I've got what I need. Tnx! – Graycegrayheaded

Answer 2

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.

Egyptian

@Pithikos answer updated to reflect newest version I believe – Egyptian

ugh yes, this is what i needed. chart.js is a perfect example of how documentation can be reasonably thorough and still be bad – Timmi

haha thanks! indeed, such excellent documentation and yet for this puny bit of info I had to scour stackoverflow... – Brokaw

This was the solution I used with the latest version 2.9.3 of chartjs – Midmost

events: [] worked for me in charts.js: ^3.8.0 and react-chartjs-2:^4.2.0 – Lever

Answer 3

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"],
       
    }

Spiritualism

this works in chartjs v3. Thanks alot – Derivation

Answer 4

There's another option:

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

Chemical

Answer 5

Version 2023 V4.4.0

it must be in the "plugins" object:

export const options = {
  plugins: {
    ...
    tooltip: {
      enabled: false,
    },
    ...
};

Parkman

Answer 6

As of 2020

Simply put tooltips: false in your options object

Suisse

Answer 7

You can try the following:

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

Inequality

Answer 8

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},
}

Sheronsherourd

Answer 9

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 :)

Kktp

This is Highcharts example. Question explicitly refers to chartjs – Aceous