terrahound
Posts: 10
Joined: Tue Sep 01, 2015 6:45 am

Triggering data labels on legend mouseover

Hi,

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}}
  />
If there is an alternative way to toggle the data labels on legend item mouseoever I would greatly appreciate it as well.

Thank you so much
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Triggering data labels on legend mouseover

Hello terrahound,

Thanks for contacting us with your question.

Here you can find related topic with working solution: https://github.com/highcharts/highchart ... issues/194
Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
terrahound
Posts: 10
Joined: Tue Sep 01, 2015 6:45 am

Re: Triggering data labels on legend mouseover

Hi mateuz.b,

Thank you so much for that solution.
How do I turn on the data labels for the mouseovered legend?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Triggering data labels on legend mouseover

Hello terrahound,

It seems like there's a bug and it is not possible to enable data labels on legend item hover (https://codesandbox.io/s/highcharts-rea ... rked-i6279). I will create a github ticket for that issue.

As a workaround you could change opacity of datalabels on legend hover.
Demo: https://codesandbox.io/s/highcharts-rea ... rked-oo20l

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
terrahound
Posts: 10
Joined: Tue Sep 01, 2015 6:45 am

Re: Triggering data labels on legend mouseover

Thank you for the solution mateuz.b
Appreciate it a lot
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Triggering data labels on legend mouseover

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”