Limit data points with chart js in React

Question

I've setup a line chart with chart js.

As you can see I have too many points with data. Is there any way to limit points in chart itself or maybe to cut the data? The current form of this graph is hard to read and bad for the performance.

Answer 1

To improve the over-labeling, set a limit on the number of ticks. Limit labels number on Chart.js line chart . To improve the load speed, you would want to display less data points, so trimming the data before displaying it could be an option.

Answer 2

You can make use of the build in data decimation that limits the amount of data points.

Example: https://www.chartjs.org/docs/master/samples/advanced/data-decimation.html