'Updating Apexchart series on daily bases in angular

I am using apexchart but cannot know how to use updateseries I have tried directly sending the values

HTML

<apx-chart [chart]="{
                          type: 'line',
                          height: 20,
                          background: '#696868',
                          sparkline: {
                              enabled: true
                          }
                      }" [colors]="['#f2f2f2']" [markers]="{
                          size: 0
                      }" [series]="chartOptions.series" [stroke]="{
                              color: '#4191ff',
                              width: 1
                      }" [xaxis]="{
                          crosshairs: {
                              width: 0
                          }
                      }" [yaxis]="{
                          min: 0
                      }" ></apx-chart>

Typescript

    export type ChartOptions = {
      series: ApexAxisChartSeries;
      chart: ApexChart;
    };

 

    @ViewChild("chart", { static: false }) chart: ChartComponent;
      public chartOptions: Partial<ChartOptions>;
      constructor(private service: SharedService) {
        this.chartOptions = {
          series: [
            {
              name: "kg/hr",
              data: ([10, 41, 35, 51, 49, 62, 69, 91, 148])
            }
          ]
        }
      }
ngOnInit() {

   
    this.ApexChart_Function();
    this.id = setInterval(() => {
      this.ApexChart_Function(); 
    }, 5000);
    
}
      ApexChart_Function() {
    const ARRAY_LENGTH = 10;
    let randomArray = [];
    for(let i =0; i<ARRAY_LENGTH; i++) {randomArray.push((Math.random() * 100).toFixed())}
    randomArray = JSON.parse("[" + randomArray + "]")
    console.log(randomArray);
    this.chartOptions.series = [{
      name: 'series_1',
      data: randomArray
    }];
    console.log(randomArray);    
  }
ngOnDestroy(): void {
    if(this.id){
      clearInterval(this.id);
    }
}

I have created a interval in the ngOnInit and calling the function i created to update the series and it work for me. And also to clear or destroy the interval after it has been used. Thanks hope it will help

Solution 1:^[1]

You should be using the ViewChild template reference in your ts file.First add the template reference to the "apex-chart" component.I have add "#chart" to the apex-chart component.

html

<apx-chart #chart [chart]="{
                          type: 'line',
                          height: 20,
                          background: '#696868',
                          sparkline: {
                              enabled: true
                          }
                      }" [colors]="['#f2f2f2']" [markers]="{
                          size: 0
                      }" [series]="chartOptions.series" [stroke]="{
                              color: '#4191ff',
                              width: 1
                      }" [xaxis]="{
                          crosshairs: {
                              width: 0
                          }
                      }" [yaxis]="{
                          min: 0
                      }" ></apx-chart></code>

Now use the template reference in your typescript file to update your series data like this

this.chart.updateSeries([
      {
        name: 'series_1',
      data: randomArray
      }
    ])

Solution 2:^[2]

The major thing to do is access your apex chart in the components using template variable syntax #whateverYourChartName then updateOptions or updateSeries like this Link to Apex docs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	minni minhaj
Solution 2	okuja

'Updating Apexchart series on daily bases in angular

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]