Is there a way to check when a series is highlighted?

I'm using the Line Chart type from Apache Echarts in an Angular project and I need to know when a line has entered into the "highlight" or "emphasis" state:



This state is triggered when hovering on a line & letting the cursor there (cursor not showing on screenshot).

Using the "highlight" event from the chart instance does not work because it emits every time you move the cursor anywhere on the graph; and actually, it does not emit when you do the hover & holding.

Using the ZRender object and listening to the "mouseover" event is more accurate as it emits only when you "mouseover" a series line. However, I still don't know when the line has actually entered into the "emphasis" or "highlight" state (when the others are grayed out and the hovered line keeps its color).

this.chartInstance.getZr().on('mouseover', (event: any) => {
console.log(event);

// can't find anything that can tell me if a series line is highlighted or not.
console.log((this.chartInstance as any).getModel());
console.log((this.chartInstance as any).getModel().getSeries());
})


Is there a flag on the series data that could tell me if one series (line) is on the "highlight" state?

Thanks in advance.

Continue reading...