How to Disable Hover with HighCharts?

Sometimes, we want to disable hover with HighCharts.

In this article, we’ll look at how to disable hover with HighCharts.

Disable Hover with HighCharts

To disable hover with HighCharts, we can set the tooltip.enabled property to false.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.2.2/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

to add the script tag and the div chart container.

Then we write:

const 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],
      ['Other', 35] 
    ]
  }]
});

We add the colors property for the chart.

We set tooltip.enabled to false to hide the tooltips.

And we set the chart.renderTo property to the ID for the chart container element.

We also put the background color, spacing, and margin styles in the same object.

title.text sets the title text.

plotOptions.pie sets the options for the pie chart, including the size and label.

series sets the setting for the chart data.

data has the chart data. type sets the chart type to render.

showInLegend lets us show or hide the legend.

Conclusion

To disable hover with HighCharts, we can set the tooltip.enabled property to false.