How to smooth the ChartJS line chart transition when switching datasets?

Oct 3 in Help

I'm using react-chartjs-2 to create a line chart for an amateur cryptocurrency analysis app. When a user clicks on a different coin or time interval, such as switching from the view of Bitcoin price action for the past 24 hours to the view of Ethereum price action for the past 24 hours, and the data is in React query's browser cache, the loading UI is not displayed, and the line chart is updated to reflect the new dataset. The issue is the transition from one dataset to another. The transition appears rough, and I'd like to know what I can do to make it look more professional and smooth. I already looked everywhere in the ChartJS documentation.

The ugly chart is what happens during the transition when you click to view data from 6M to 1Y. Again, this only happens if the data is readily available in cache and no loading UI needs to show. The other chart is after fully rendering the new dataset.

1 comment