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

Answer 1

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.

Answer 2

You can try

 showTooltips: false 

You can also use the following link

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