Chart.js How to actualize canvas due to new x-axis range typed by user

by

1👍

✅

When updating the chart labels, you also need to update the corresponding values in the data array of your dataset.

There’s no need however to invoke chart.update(), ng2-charts is built in a way that Angular change detection will take care of updating the chart as soon as its data or options change.

You could change the updateChart method as follows to make it work:

updateChart(start, end) {
  const labels = [];
  const data = []; 
  this.lineChartLabels.forEach((l, i) => {
    if (l >= start && l <= end) {
      labels.push(l); 
      data.push(this.seriesB[i]);
    }
  });
  this.lineChartLabels = labels;
  this.lineChartData[0].data = data;
}

Please take a look at your amended StackBlitz.

Leave a comment