Disable legend hover in Highcharts

Question

I need to disable the hover attribute of legend items because I am using Highcharts on mobile platforms. Sadly, making a legendItemClick event does not solve the problem as hovering still occurs.

I was encouraged to see that this issue came up on the old support site for highcharts back in 2011. The thread can be found here. I was particularly glad to see the last jfiddle example and the function declared in it.

Unfortunately, the only thing that worked for me was the workaround of changing the setHoverStyle to null. This isn't great though since the hover action still fires and makes navigating the legend and chart unresponsive. The rest of the suggestions in the above thread resulted in the chart not being rendered.

Granted, it might be because I had a difficult time translating the example to my purposes - honestly, I do not know where to call the function and everywhere I have tried has failed. My JavaScript file is set up along the lines of

var chartDefinition = {
  chart: {
    renderTo: 'chart_content',
    type: 'column'
  },
  colors: [
         '#619ED6',
         '#6BA547',
         '#F7D027',
         '#E48F1B',
         '#B77EA3',
         '#E64345',
         '#60CEED',
         '#9CF168',
         '#F7EA4A',
         '#FBC543',
         '#FFC9ED',
         '#E6696E'
         ],
  title: {
    text: ''
  },

  ...

 column: {
      shadow: false,
      borderWidth: 1,
      events: {
        click: function() { return false; },
        legendItemClick: function() { return false; }
      },
      dataLabels: {
        enabled: false,
        color: '#222',
        style: {
          fontFamily: 'sans-serif',
          fontSize: '13px',
          fontWeight: 'bold'
        }
      }
    }
  },
  series: []
}; 

Listing and setting the various highcharts attributes.

Does anyone know how to disable this hover attribute or where the proper place would be to call the function?

Answer 1

There are a few solutions to implement this. There's no built-in option to change that (as of 06.2022).

1. Try to disable mouseover for legendGroup, not legendItem.

Demo: http://jsfiddle.net/Cp7xh/10/

2. Disable pointer-events in CSS:

.highcharts-legend {
    pointer-events: none;
} 

Demo: http://jsfiddle.net/BlackLabel/ebrodhk4/

3. A plugin that prevents Highcharts Core from adding events:

Plugin:

(function(H) {
    H.wrap(
        H.Legend.prototype,
        'init',
        function(proceed, chart, options) {
            
            if (options.enableMouseTracking === false) {
                this.setItemEvents = false;
            }
            
            proceed.apply(this, [chart, options]);
        }
    );
})(Highcharts);

Usage:

    legend: {
        enableMouseTracking: false,
        itemStyle: {
            cursor: 'auto'
        }
    },

Demo: https://jsfiddle.net/BlackLabel/ogqv2sya/