Search code examples
angularangular2-highcharts

How can refresh or reload data in highchart in angular 5/6


I am using highcharts in angular6. i want to reload data using setinterval . i can not find proper solution.

Chartcomponent.ts

import { Chart, Highcharts } from 'angular-highcharts';

ngOnInit() {
  this.loaded = false;
  this.rowData = [[0, 2], [1, 2], [2, 3], [4, 4], [4, 5]];
  this.loadChart(this.data.data);
}

loadChart(data): any {
  this.highChartsOptions = {
    chart: { type: this.graphType },
    title: { text: '' },
    legend: { enabled: false },
    plotOptions: { series: { dataLabels: { enabled: true } } },
    series: [{ name: 'random series', data: data }]
  };
  this.handleIntervals();
}

handleIntervals(): void {
  setInterval(() => {
      console.log(this.rowData[this.rowData.length - 1]);
      let rowY = this.rowData[this.rowData.length - 1];
      let y = rowY[0];
      this.rowData.push([parseInt(y) + 1, 10]);
      // this.highChartsOptions.series[0].data = this.rowData;
      // this.loadChart( this.rowData);
  }, 5000);
  // const subscribe = source.subscribe(this.loadChart());
}

Solution

  • Finnaly i get solve this. I think it is not proper solution but it's working fine. https://stackblitz.com/edit/highchart-angular-reload-data