How to limit number of displayed points in chart.js?

Question

I have too many points on x-axis in my chart. I would like to limit maximum of displayed points to 100. But at the same time still displaying same chart. Exactly same chart - but with fewer points.

screenshot of my chart with too many points

I have no idea how to do it in PHP at server side so I was thinking if there is any solution on client side in chart.js?

Answer 1

It's your responsibility to give chart.js the points it should display. You have to limit the arrays with the labels and the data to 100 datapoints. Use every second data or so. Just do it in plain JavaScript. There's no function in chart.js for that.

Answer 2

For large datasets, chart.js does offer a data decimation plugin that automatically decimates data at the start of the chart lifecycle, reducing the number of data points drawn. According to chart.js docs, to use the decimation plugin, the following requirements must be met:

• The dataset must have an indexAxis of 'x' The dataset must be a line
• The X axis for the dataset must be either a 'linear' or 'time' type axis
• Data must not need parsing, i.e. parsing must be false
• The dataset object must be mutable. The plugin stores the original data
• as dataset._data and then defines a new data property on the dataset.

Your chart options should look something like this:

options: {
    parsing: false,
    plugins: {
      decimation: {
         enabled: false,
         algorithm: 'min-max',
      },
    },
    scales: {
      x: {
        type: 'time',
        ticks: {
          source: 'auto',
          autoSkip: true,
        }
      }
    }

Remember also that if you disable parsing the data you pass should be in the right format for the type of chart you chose, so epoch timestamps in this case. More info here.

Finally, you can find a working example here.