Chart Js - Limit points on graph without limiting data

Question

I have a chart.js chart that needs to get plotted from a large number of points (say 1000). When I plot all these points it looks pretty bad, so I looked for a way to limit those. I used the method described here:

Limit data points with chart js

This works, but there is a big problem. It misses some important highs and lows of the 1000 points, basically plotting an incorrect chart.

Is there a way to not do this without missing some values? Basically plotting the chart with all the 1000 points but displaying like 30 on it.

I have tried a few plugins (decimation, downsample), but it seems they require vectors to work (like {x,y}). My data is an array of strings used for dates on the x axis and an array of float numbers used for prices on the y axis.

Thanks!

Answer 1

You can use the Chart.js inbuilt Data Decimation plugin.

Your base data consists of two arrays, one contains the date strings, the other contains the prices. These can easily be converted into an array of data points (objects having an x and y property each) as follows.

data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] }))

Further you must meet all the requirements of the decimation plugin. I also had to explicitly define options.parsing: false.

Please take a look at the runnable code and see how it works.

const dateStrings = [];
const prices = [];

// create sample data (dateStrings & prices)
const date = new Date();
date.setDate(date.getDate() - 100);
for (let i = 0; i < 100; i ++) {
  date.setDate(date.getDate() + 1);
  dateStrings.push(date.toISOString().substring(0,10));  
  prices.push(parseInt(Math.random() * 1000));
}

new Chart('myChart', {
  type: 'line',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: dateStrings.map((d, i) => ({ x: Date.parse(d), y: prices[i] })),
      lineTension: 0.3,
      borderColor: 'rgb(100, 100, 255)'
    }],
  },
  options: {
    parsing: false,
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'lttb',
        samples: 20,
        threshold: 20
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM yyyy'
          },
          tooltipFormat: 'D MMM yyyy'
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="myChart" height="100"></canvas>