How do I update data in carbon angular chart?-CodePudding

I have the following code I am using to try and update angular carbon charts line graph.. but the graph seems to not update even though the data is. What am I doing wrong here?

Pressing the button is supposed to add a segment to the array and load in the graph.. I see in the console the data array updating and yet nothing on the graph..

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, interval, Observable, Subscription } from 'rxjs';
import { StockService } from './stockService'

@Component({
  selector: 'app-stockticker',
  templateUrl: './stockticker.component.html',
  styleUrls: ['./stockticker.component.css']
})

export class StocktickerComponent implements OnInit
{

subscription: Subscription
i = 0
title = "Stocktcker"
    data = []

    options;

    constructor(private stockService: StockService)
    {
        
    }

    ngOnInit(): void
    {
        this.stockService.data$.subscribe(
            (data) => {
              if (data.length)
              {
                this.data = data
              }
              else
              {
              }
            }
          )
          this.options = {
            "title": this.title,
            "curve": "curveMonotoneX",
            "axes": {
              "bottom": {
                "title": "Stocks over time",
                "mapsTo": "key",
                "scaleType": "linear"
              },
              "left": {
                "mapsTo": "value",
                "title": "Value",
                "scaleType": "linear",
                "domain": [
                  0,
                  1.8
                ]
              }
            },
            "height": "300px"
          }
}

    onClick()
    {
        this.i  = 1
        this.data.push({
            "group": "groupname",
            "key": this.i,
            "value": this.AMOUNTS[getRandom(this.AMOUNTS.length)]
          })
          this.stockService.setData(this.data)
    }
}

function getRandom(max)
{
    // return (Math.random() * (0 - 2)   2).toFixed(4)
    return Math.floor(Math.random() * max)
}

HTML Portion:

<ibm-line-chart [data]="data" [options]="options"></ibm-line-chart>
<button nz-button nzType="primary" (click)="onClick()">Turn</button>

Service portion:

import { Injectable } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";

@Injectable
(
    {
        providedIn: 'root'
    }
)
export class StockService
{

    data$: Observable<any>
    private dataSubject = new BehaviorSubject<any>({})

    constructor()
    {
        this.data$ = this.dataSubject.asObservable()
    }

    setData(newData)
    {
        this.dataSubject.next(newData)
        console.log(newData)
    }
}

CodePudding user response：

I think you are just pushing in the array but this needs to be reminded to angular change detection that there is an update already made in data

try below code instead,

onClick()
{
    this.i  = 1
    this.data.push({
        "group": "groupname",
        "key": this.i,
        "value": this.AMOUNTS[getRandom(this.AMOUNTS.length)]
      })
      this.data = [...this.data];
      this.stockService.setData(this.data)
}