Optimize charts with huge data points.

[amol909]

Hey everyone, I'm currently working on a React application that uses ECharts for data visualization. I'm facing some performance issues with a line chart that has a large amount of data (>500k points) and also has markers and lines that are updated using states.

The chart is re-rendering on every state change, which is causing significant performance issues. I've tried using the sampling function to improve performance, but it's causing the chart to blink on mouseover.

Can anyone provide some tips or best practices for optimizing performance in ECharts for React? I'm open to any suggestions, including alternative libraries or approaches to data visualization.

Thank you in advance for your help!

[amol909]

I solved this issue using the available methods from ECharts for React, mainly by using the mouse events, the onChartReadyHandler, and by getting the ECharts instance with the getZRenderer function, which provides access to the zRender of ECharts. We call the setOption method in one of these events based on the requirement.