Argthtjtr

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.

You need to use [(update)] flag to update the series as below:

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]]

    }];

   this.updateFlag = true;

}



<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; height: 400px; display: block; overflow: auto;" [(update)]="updateFlag" ></highcharts-chart>

Working demo here: https://stackblitz.com/edit/angular-d5spve