[Chartjs]-How to limit number of displayed points in chart.js?

by

2👍

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.

1👍

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.

Leave a comment