title: How to update angular-plotly.js plot when data changes in angular 7
body: <p>I am developing app in Angular 8 and displaying 'scatter' plot using angular-plotly.js. For data in x,y I am getting data from rest api. And I am able to plot graph using the data from rest api. On frontend I have a two dropdown from where user can select option and send those options value to backend and in response I get new data back to frontend. Till this point everything works fine, but the issue I am facing is that my plot is not getting updated with new data. Frontend still showing the initial plot not the new plot with different data value.</p>
  
  <p><strong>My Html code:</strong></p>
  
  <p>Here is my two dropdown from where user select options and based on this options from backend through restapi I receive data points to plot my graph. And when user changes any option from dropdown and submit new choice to backend I again receive new data point and I need to remove my old plot and display new plot based on new dataset.</p>
  
  <pre><code>&lt;form (ngSubmit)="segmentSelection()" #ff="ngForm"&gt;
              &lt;div id="userSelection" ngModelGroup="userData" #userData="ngModelGroup"&gt;
            &lt;mat-form-field&gt;
              &lt;mat-label&gt;Choose Segment Key&lt;/mat-label&gt;
              &lt;mat-select id="selectme" ngModel name="segmentKey"&gt;
                &lt;mat-option *ngFor="let segment of segKeys" [value]="segment"&gt;
                  {{segment}}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
  
            &lt;mat-form-field style="margin-left: 30px;"&gt;
              &lt;mat-label&gt;Choose Target Variable&lt;/mat-label&gt;
              &lt;mat-select id="myselect" ngModel name="target_variable"&gt;
                &lt;mat-option *ngFor="let msg of mymessage" [value]="msg"&gt;
                  {{msg}}
                &lt;/mat-option&gt;
              &lt;/mat-select&gt;
            &lt;/mat-form-field&gt;
            &lt;button type="submit" class="btn btn-success btn-color" (click)="plotDiv()" style="margin-left: 20px;"&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
          &lt;/form&gt;
  
  &lt;plotly-plot [data]="graph.data" [layout]="graph.layout"&gt;&lt;/plotly-plot&gt;
  </code></pre>
  
  <p><strong>My component.ts code:</strong></p>
  
  <pre><code>myhistoricPlot = []
  myhistoricDate = []
  
  segmentSelection(){
    this.plotselection.segmentKey = this.segmentData.value.userData.segmentKey;
    this.plotselection.target_variable = this.segmentData.value.userData.target_variable;
    console.log(this.segmentData);
    fetch("http://localhost:5000/data-decomposition", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },body: JSON.stringify({
        segmentKey: this.segmentData.value.userData.segmentKey,
        target_variable: this.segmentData.value.userData.target_variable
      })
    }).then(res =&gt; res.json()
      // console.log(res);
      // console.log('hello saheb')
      // console.log(res.json())
  
    ).then(myjson =&gt; {
  
      myjson['Data'].forEach(element =&gt;{
        this.myhistoricPlot.push(element)
      })
      myjson['Date'].forEach(element =&gt;{
        this.myhistoricDate.push(element)
      })
      // console.log(this.myhistoricPlot)})
      // this.myhistoricDate = myjson['Date'];
      // this.myhistoricPlot = myjson['Data'];
      console.log(this.myhistoricDate);
      console.log(this.myhistoricPlot);
      console.log(myjson)
      this.myhistoricPlot = [];
      this.myhistoricDate = [];
      })
  }
  
  public graph = {
      data: [
          { x: this.myhistoricDate, y: this.myhistoricPlot, type: 'scatter', mode: 'lines+points', marker: {color: 'black'} },
  
      ],
      layout: {width: 1200, height: 600, title: 'Historical Actuals Plot'}
  }; 
  </code></pre>
  
  <p>****Note: myhistoricDate, myhistoricPlot are the two list with some numerical values, in which I am receiving data from restapi.</p>
  
  <p>Thank you....your help on this issue would be highly appreciated</p>