[Solved]-Highcharts - fire legendItemClick event-Highcharts

I think the answer with defining the click on

$('.highcharts-legend-item')[0]) 

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
            }
        }
    }
}