I'm using highcharts-angular in angular 6 app. When I set data, hardcore it, in ngOnInit, chart is visible and works correctly.
But I want to update chart series dynamically, meaning add point to the series, add new series... This will be done after calling web API and getting new data, calling loadBidChartData().
If I set new series for chat, or update series, chart don't see changes, initial state is not changing. How can I solve this?
Here is small peace of example code in html is like this:
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [update]="true" ></highcharts-chart>
in angular:
import * as Highcharts from 'highcharts';
export class ExampleComponent implements OnInit {
Highcharts = Highcharts; // required
chartOptions = {
chart: {
type: "scatter",
width: 900
},
},
tooltip: {
valueDecimals: 0,
formatter: function () {
return this.y + ' €';
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
},
yAxis: {
type: 'number',
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
floating: false,
borderWidth: 1
},
series: []
};
ngOnInit(): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
}];
}
loadBidChartData(bidApiModel: BidItem[]): void {
this.chartOptions.series= [{
name: 'first last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 25), 23], [Date.UTC(2018, 11, 16, 10, 57, 15), 132], [Date.UTC(2018, 11, 16, 10, 58, 2), 312], [Date.UTC(2018, 11, 16, 10, 58, 15), 432]]
},
{
name: 'second last',
data: [[Date.UTC(2018, 11, 16, 10, 56, 28), 50], [Date.UTC(2018, 11, 16, 10, 56, 45), 152], [Date.UTC(2018, 11, 16, 10, 56, 53), 250], [Date.UTC(2018, 11, 16, 10, 57, 11), 320]]
}];
}
}
Solution:
Working demo with updating in background and adding and removing points to highcharts: https://stackblitz.com/edit/angular-bv26xz
Thank you User3250 and Wojciech Chmiel for the help.