CODEWITHSUNDEEP
javascriptjqueryhtmlchart.js
ggsplet
ggsplet

Reputation: 706

Chart.js - how to disable everything on hover

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);
                };      
            });

Upvotes: 50

Views: 113151

Answers (9)

Megan Word
Megan Word

Reputation: 2131

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

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

const 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.

Upvotes: 194

larz
larz

Reputation: 871

Version 2023 V4.4.0

it must be in the "plugins" object:

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

Upvotes: 2

Stefano Belfiore
Stefano Belfiore

Reputation: 31

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

Upvotes: 2

Nur Amin Sifat
Nur Amin Sifat

Reputation: 93

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

Upvotes: 5

Sanyami Vaidya
Sanyami Vaidya

Reputation: 809

You can try:

 showTooltips: false

You can also use the following link:

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

Upvotes: 6

Renil Babu
Renil Babu

Reputation: 2367

You can try the following:

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

Upvotes: 0

Brandon
Brandon

Reputation: 502

As of 2020

Simply put tooltips: false in your options object

Upvotes: 0

dcalmeida
dcalmeida

Reputation: 403

There's another option:

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

Upvotes: 3

V&#237;ctor Guti&#233;rrez
V&#237;ctor Guti&#233;rrez

Reputation: 91

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

Upvotes: -10

Related Questions