[Chartjs]-Chart Js – Limit points on graph without limiting data

by

2👍

✅

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>

Leave a comment