title: NGX-charts bubble chart how to reload displayed data
body: <p>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 <code>updateTitleData()</code> function. In testing however as I click on the elements the data of the <code>scatterData</code> 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.</p>
  
  <p>I have read a bit about it online, people have said that you need to change the actual <code>scatterData</code> array rather than just the <code>"series"</code> element of it which I tried by making an array value in <code>updateTitleData</code> that held the whole array and then jut doing <code>this.scatterData=newData;</code> at the end of the function which again did set the data correctly but still didn't cause the chart to update.</p>
  
  <p>I also read that you need to put a <code>[update$]="update$"</code> in the html code and then when defining the chart variables in the typescript code use <code>update$: Subject&lt;any&gt; = new Subject();</code> followed by defining the function <code>updateChart(){ this.update$.next(true); }</code> so that you can just call <code>updateChart()</code> whenever you need the chart to update. I tried that however it would just throw an error while loading initially due to the <code>[update$]="update$"</code> element being included in its constructor.</p>
  
  <pre><code>public scatterData = [{
       "name" : "LQArray",
       "series" : [{
           "name" : "a",
           "x" : 1,
           "y" : 2,
           "r" : 1
       }]
   }];
  
   private updateTitleData() {    
       if(this.regionData &amp;&amp; this.regionData.location_quotient){
           this.scatterData["series"] = [];
           this.jobTitles.forEach((value) =&gt; {
               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);
           });
       }
  }
  </code></pre>
  
  <p>Here is the code in question. The chart does display the <code>"a"</code> element that is defined at the beginning, but that should be deleted and replaced as soon as the element is clicked.</p>