[Angular]How do I control the refresh timing with input binding other than with the numeric value

@Input() a

...

this.chartObj = new Chart(this.el.nativeElement.getContext('2d'), {
	...
	options: {
		plugins: {
			streaming: {
				refresh: 1000, // onRefresh callback will be called every 1s
				onRefresh: (chart: Chart) => {
					// something
				}
			}
		}
	}
});

With the above snippet, I’d like to control the refresh the chart when I get the new input data a but apparently, the datasets only get updated every 1s.

I’ve tried using ngOnChanges cycle, pushing the new data to the datasets and update the chart instance but it didn’t seem to work.

this.chartObj.config.data.datasets.push({
  // label: 'Dataset ' + config.data.datasets.length,
  // backgroundColor: color(newColor).alpha(0.5).rgbString(),
  // borderColor: newColor,
  fill: false,
  lineTension: 0,
  data
});
this.chartObj.update();

What am I missing?

[nagix]

If you are using strict type checking, run npm install @types/chart.js and use the following code:

import {Chart, ChartDataSets, ChartPoint} from 'chart.js';
import 'chartjs-plugin-streaming';

...

if (this.chartObj.data && this.chartObj.data.datasets) {
  this.chartObj.data.datasets.forEach(function(dataset: ChartDataSets, i: number) {
    (dataset.data as ChartPoint[]).push({
      x: Date.now(),
      y: data[i]
    });
  });
}
this.chartObj.update({
  duration: 0
});

[nagix]

A timestamp (for example, Date.now()) must be set to x property even if you don’t need to show the x-axis labels. To hide the x-axis labels, use the following code:

  options: {
    scales: {
      xAxes: [{
        type: 'realtime',
        display: false
      }]
    },
    ...
  }