Disable hover on HighCharts

Question

I have building a pie chart using HighCharts library, and here is my chart:

 // http://jsfiddle.net/t2MxW/20890/

    var chart = new Highcharts.Chart({
                 


        

Answer 1

You might alternatively want to disable all mouse tracking in general, both tooltip and hover effects:

(copy and paste link) http://api.highcharts.com/highcharts#series.enableMouseTracking

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-enablemousetracking-false/

plotOptions: {
    series: {
        enableMouseTracking: false
    }
}

Answer 2

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1,
      },
    },
  }
}

I did this to display multiple line charts on hover.

Answer 3

You can simply turn them of using the following:

tooltip: {
    enabled: false       
},

Answer 4

I usually just disable the style in css so I can still access the hover event in JS if needed...

.highcharts-tooltip {
    display: none;
}

Answer 5

Disabling tooltip just disables the tooltip but the hover effect is still present. To disable the hover effect, add the following to your plotOptions:

    plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },

Answer 6

You need to set the tooltip attribute to false, like so:

tooltip: { enabled: false },

jsFiddle here

---

Here's the full code for your case:

var chart = new Highcharts.Chart({
       colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
       credits: { enabled: false },
       tooltip: { enabled: false },
       chart: {
              renderTo: 'container',
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              type: 'pie',
              margin: [0, 0, 0, 0],
              spacingTop: 0,
              spacingBottom: 0,
              spacingLeft: 0,
              spacingRight: 0
       },
       title: { text: null },
       plotOptions: {
              pie: {
                  allowPointSelect: false,
                  size: '100%',
                   dataLabels: { enabled: false }
              }
      },
      series: [{
              showInLegend: false,
              type: 'pie',
              name: 'Pie Chart',
              data: [
                    ['Mobile', 65], // first half of pie
                    ['Other', 35] // second half of pie
              ]
      }]
});