[Chartjs]-How to achieve the best possible performance with mutable data and real-time charts in React?

Every time you shift an array you will need to move the position of every item therefore you might as well copy the whole array. There are a couple of things you can do to work around this bottleneck. Number one is to accept less data points. Your user’s screen is less pixels wide than the amount of points you want to render so unless you have a very dense graph with a lot of lines, you can probably already visually get away with a lot less data points.

The problem still remains the same though so you’re going to have to do more trickery. Something you could do would be to find a way to give indexes to your chart library that way you can just append the array and tell the chart to only render starting at the index equal to the amount of items appended to your array. The chart would still have to rerender every point but we’re getting there.

The best solution would be to skip the last trick and find a chart library that has the ability to either render new points on the fly or when given a new array of points diffs it to only render the new ones AND will render those new points to the right of the old points therefor not rerendering the rest of the points. To get it to look visually what you want you will have to put the chart into a horizontal scroll view then disable scrolling and keep it glued to the right. You will have to make the legend and metrics yourself though.

Hope someone has a better solution for you hahaha good luck.