Accepted answer

Just use:


Where the 0 is the index of the series you wish to 'click'.

Update fiddle.


  • highcharts-legend-item is the class of each entry in the legend. I discovered this by inpecting the legend using chrome developer tools.
  • the $('.highcharts-legend-item') is a jquery selector to return an array of all elements of that class. I select the first one by index and the $() it to convert it into a jquery object
  • The .click is this:


I think the answer with defining the click on


is not the best one. It is very "expensive" since the DOM is probably heavy. My solution is generally based on CSS. You can set the position of highchart legend items right above the custom elements that you want to use and every item should have width&height same as the custom HTML element. Highchart elements should have opacity value 0 so they are not visible. So when you click on your element,in fact, you are clicking on the highchart legend item. If you want to set some CSS for your custom element you should define legendItemClick callback:

plotOptions: {
    series: {
        events: {
            legendItemClick: function() {
                var legenedItemIndex = this.index // index of highchart legend item
                $("your html element:eq(" + legenedItemIndex + ")") //do something with your element

Related Query

More Query from same tag