←

Settings and activity

1 result found

  1. Add an event for legend item hovering

    45 votes
    13 comments  ·  Highcharts Javascript API  ·  Admin →
    How important is this to you?
    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);
    },
    },
    }
    }
    ```