Chart.js how to show just last 10 points in the chart

Question

I have line chart and method that is filling it with data, but i want to display only last 10 points in the chart.

getRandomInt() {
this.intervalId = setInterval(() => {
  this.setState(prevState => {
    return {
      chartData: {
        ...prevState.chartData,
        labels: [
          ...prevState.chartData.labels,
          prevState.chartData.labels.length + 1,
        ],
        datasets: [
          {
            ...prevState.chartData.datasets[0],
            data: [
              ...prevState.chartData.datasets[0].data,
              Math.floor(Math.random() * 10) + 1,
            ],
          },
        ],
      },
    };
  });
}, 2000);}

Is there a weay to do it?

Answer 1

If you want to display only top 10 and leave other option visible only in legend. You can try:

const datasets = [
  ...top10.map(item => ({
    label: item.label,
    data: item.data,
    borderWidth: 2
  })),
  ...others.map(item => ({
    label: item.label,
    data: [], // Hidden from chart
    borderWidth: 0,
    hidden: true
  }))
];

It was working for me.