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({
        colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        credits: { 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
               ]
       }]
    });

But the problem is that I don't want appearing tooltip on mouse over...

Is it possible to disable tooltip on hover?

Answer 1

You can simply turn them of using the following:

tooltip: {
    enabled: false       
},

Answer 2

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

Answer 3

you can simply disable it by setting the option

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

As specified in the accepted answer, you need to set

 tooltip: { enabled: false }

Note - you must specify this as a property of your Highcharts.Options object (i.e. your chart options object, not a property of your series). So, either specify it in the JSON that you pass into your Highcharts.Chart object, or specify it as a property of a Highcharts.Options object that you explicitly create, before you pass it to you Highcharts.Chart

See https://api.highcharts.com/highcharts/tooltip.enabled

Answer 6

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

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