Skip to content
←

Settings and activity

1 result found

  1. Add an event for legend item hovering

    45 votes
    Vote

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close
    You have left! (?) (thinking…)
    13 comments  ·  Highcharts Javascript API  ·  Admin →
    How important is this to you?

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close
    An error occurred while saving the comment
    Ivan Seredkin commented  · 

    Based on @Jorge solution I created a universal function that will work in pie or bar charts:

    ```
    const legendItemHover = (event) => {
    const { chart: legendHoveredChart } = event.target;
    const { legend, tooltip } = legendHoveredChart;
    for (const item of legend.allItems) {
    item.legendItem.on('mouseover', () => {
    const data = item?.series?.data[item.index] || item.data[0];
    tooltip.refresh(data);
    legend.allItems.forEach((itm) => itm.setState('inactive'));
    item.setState('hover');
    }).on('mouseout', () => {
    tooltip.hide();
    legend.allItems.forEach((itm) => itm.setState('normal'));
    });
    }
    };
    ```

    pie chart plotOptions:
    ```
    {
    pie: {
    events: {
    afterAnimate(event) {
    legendItemHover(event);
    },
    },
    }
    }
    ```

    bar chart plotOptions:
    ```
    {
    series: {
    events: {
    afterAnimate(event) {
    legendItemHover(event);
    },
    },
    }
    }
    ```