The chartoptions in highcharts are not getting updated from function call in ngoninit

Question

I'm displaying a pie chart based on the values i receive from the observable. I want to update the series in the highcharts options on function call from the observable. The present call does not update the values, highcharts displays the empty values that have been initialised in the chartoptions. How can I update the chartoptions from ngOnInit function call?

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { DataProvider } from '../services/dataprovider';
import { DataserviceService } from '../dataservice.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private service: DataserviceService, private http: HttpClient
    , private dataProvider: DataProvider) {
        
     }
   

   public cashWithDrawl = [{title: "Today", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Yesterday", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Month till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""}
                          ];
    

  ngOnInit(): void {

    this.service.getToday().subscribe (
        reponse => {
            let data = reponse["data"];
            console.log(reponse["data"])
            this.cashWithDrawl[0].successAmt = this.convertNumber(data["cwsuccessAmount"]);
            this.cashWithDrawl[0].successCount = this.convertNumber(data["cwsuccessCount"]);
            this.cashWithDrawl[0].failureCount = this.convertNumber(data["cwfailureCount"]);
            this.cashWithDrawl[0].totalCount = this.convertNumber(data["cwsuccessCount"] +data["cwfailureCount"]);
            this.cashWithDrawl[0].successPer = ((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);
            this.cashWithDrawl[0].failurePer = ((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);

            this.updateData(((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100),((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100));
            

           

            
        }
    )
    

  }

  updateData(a: number, b: number) {
    this.chartOptions.series = [
      {
        // data: data
        data: [{
                    name: 'Success',
                    y: a,
                    // sliced: true,
                    // selected: true,
                    // color: '#00cc44'
                    color: '#33cc33'
                },   {
                    name: 'Failure',
                    y: b,
                    color: '#ff1a1a'
                }]
        
      }
    ];
    console.log(a)
    
  }

  convertNumber(value) {
    
    
        let val = Math.abs(value);
        let num;
        if (val >= 10000000) {
          num = (val / 10000000).toFixed(2) + 'Cr';
        } else if (val >= 100000) {
          num = (val / 100000).toFixed(2) + 'L';
        }
        return num;
      
    
  }


  highcharts = Highcharts;
  chartOptions = {
    chart: {
        backgroundColor: 'transparent',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                // enabled: true,
                format: ' {point.percentage:.1f} %'
            },
            
        }
    },
    
    series: [
        {
            data: []
        }
    ]
}



}

Answer 1

Create an update flag in the typescript folder and set it to false. While calling the updateData function, set the flag to true and bind the value to the update property of highcharts This let's highcharts read the updates to it's properties.

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { DataProvider } from '../services/dataprovider';
import { DataserviceService } from '../dataservice.service';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
updateFlag : boolean = false;

  constructor(private service: DataserviceService, private http: HttpClient
    , private dataProvider: DataProvider) {
        
     }
   

   public cashWithDrawl = [{title: "Today", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Yesterday", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Month till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""},
                           {title: "Till Date", successAmt:"", successCount:0 ,failureCount:0,totalCount: 0, successPer: "", failurePer: ""}
                          ];
    

  ngOnInit(): void {

    this.service.getToday().subscribe (
        reponse => {
            let data = reponse["data"];
            console.log(reponse["data"])
            this.cashWithDrawl[0].successAmt = this.convertNumber(data["cwsuccessAmount"]);
            this.cashWithDrawl[0].successCount = this.convertNumber(data["cwsuccessCount"]);
            this.cashWithDrawl[0].failureCount = this.convertNumber(data["cwfailureCount"]);
            this.cashWithDrawl[0].totalCount = this.convertNumber(data["cwsuccessCount"] +data["cwfailureCount"]);
            this.cashWithDrawl[0].successPer = ((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);
            this.cashWithDrawl[0].failurePer = ((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100).toFixed(2);

            this.updateData(((data["cwsuccessCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100),((data["cwfailureCount"]/(data["cwsuccessCount"] +data["cwfailureCount"]))*100));
            

           

            
        }
    )
    

  }

  updateData(a: number, b: number) {
  this.updateFlag = true;
    this.chartOptions.series = [
      {
        // data: data
        data: [{
                    name: 'Success',
                    y: a,
                    // sliced: true,
                    // selected: true,
                    // color: '#00cc44'
                    color: '#33cc33'
                },   {
                    name: 'Failure',
                    y: b,
                    color: '#ff1a1a'
                }]
        
      }
    ];
    console.log(a)
    
  }

  convertNumber(value) {
    
    
        let val = Math.abs(value);
        let num;
        if (val >= 10000000) {
          num = (val / 10000000).toFixed(2) + 'Cr';
        } else if (val >= 100000) {
          num = (val / 100000).toFixed(2) + 'L';
        }
        return num;
      
    
  }


  highcharts = Highcharts;
  chartOptions = {
    chart: {
        backgroundColor: 'transparent',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: ''
    },
    tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                // enabled: true,
                format: ' {point.percentage:.1f} %'
            },
            
        }
    },
    
    series: [
        {
            data: []
        }
    ]
}



}

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