I've been trying to access the mouseover event of the series legend items but so far I've only found solutions using jQuery.
I'm using highcharts with react & typescript and the following implementation just to trigger a console output, but it does not work:
Code: Select all
let internalChart: Chart;
useEffect(() => {
if (!!internalChart) return;
internalChart.series.forEach((seriesItem) => {
/*
For some reason the seriesItem does not have legendItem in the typings,
but does exists on actual execution
*/
const legendItem = seriesItem['legendItem'];
legendItem.on('mouseover', () => {
console.log('Triggered mouseover', this);
});
legendItem.on('hover', () => {
console.log('Trigger hover', this);
});
legendItem.on('click', () => {
console.log('Triggered click', this);
});
});
}, [internalChart]);
...
...
...
<HighchartsReact
highcharts={Highcharts}
options={chartOptions}
callback={(chart: Chart) => {internalChart = chart}}
/>
Thank you so much