NGX-charts bubble chart how to reload displayed data

Question

I have a bubble chart (using it as a scatter plot but whatever) from ngx-charts. The HTML is set up so that as the user clicks on an element of the page the contents of the chart change based on the updateTitleData() function. In testing however as I click on the elements the data of the scatterData array changes however this does not change the actual displayed chart. So my question is how to get the chart to dynamically reload while running.

I have read a bit about it online, people have said that you need to change the actual scatterData array rather than just the "series" element of it which I tried by making an array value in updateTitleData that held the whole array and then jut doing this.scatterData=newData; at the end of the function which again did set the data correctly but still didn't cause the chart to update.

I also read that you need to put a [update$]="update$" in the html code and then when defining the chart variables in the typescript code use update$: Subject<any> = new Subject(); followed by defining the function updateChart(){ this.update$.next(true); } so that you can just call updateChart() whenever you need the chart to update. I tried that however it would just throw an error while loading initially due to the [update$]="update$" element being included in its constructor.

public scatterData = [{
     "name" : "LQArray",
     "series" : [{
         "name" : "a",
         "x" : 1,
         "y" : 2,
         "r" : 1
     }]
 }];

 private updateTitleData() {    
     if(this.regionData && this.regionData.location_quotient){
         this.scatterData["series"] = [];
         this.jobTitles.forEach((value) => {
             var newScatterData = [{
                 "name":value,
                 "x":parseFloat(this.regionData.x_axis[value]),
                 "y":parseInt(this.regionData.y_axis[value]),
                 "r":1
             }];
                  this.scatterData["series"].push(newScatterData);
         });
     }
}

Here is the code in question. The chart does display the "a" element that is defined at the beginning, but that should be deleted and replaced as soon as the element is clicked.

Answer 1

I figured it out. I was populating the "series" element incorrectly.

What I had:

this.jobTitles.forEach((value) => {
     var newScatterData = [{
        "name":value                 
        "x":parseFloat(this.regionData.x_axis[value]),
        "y":parseInt(this.regionData.y_axis[value]),
        "r":1
    }];
         this.scatterData["series"].push(newScatterData);
});

What I needed:

this.jobTitles.forEach((value) => {
     var newScatterData = {
        "name":value                 
        "x":parseFloat(this.regionData.x_axis[value]),
        "y":parseInt(this.regionData.y_axis[value]),
        "r":1
    };
         this.scatterData[0]["series"].push(newScatterData);
});
this.scatterData=[...this.scatterData];

Basically needed the [0] in front of the ["series"] and needed to remove the array element from newScatterData.