Changing Plotly barchart bar color not reflecting in angular UI

Question

Used the below function to update plotly-plot barchart color, the colorchange is not refrecting in angular ui. How do I resolve this?

colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    this.graph.layout.colorway.forEach((item, i) => {
      if (item == $event.currentBarData.marker.color) {
        this.graph.layout.colorway[i] = $event.data;
      }
    });
    this.cdRef.detectChanges();
  }

<plotly-plot
    [divId]="graph.selectedGraph.name"
    [data]="graph.selectedGraph.data"
    [config]="graph.selectedGraph.config"
    [layout]="layout"
    (relayout)="draggedShape($event)"
    [ngClass]="{ 'single-data': graph.data && graph.data.length === 1 }"
    #plotlyPlot
  >
  </plotly-plot>

Answer 1

Try updating the reference of layout using object de-structuring to create a new array reference, which might cause the component to refresh! since an ngOnChanges will trigger when the input changes!

  colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    let changed = false;
    this.graph.layout.colorway.forEach((item, i) => {
      if (item == $event.currentBarData.marker.color) {
        changed = true;
        this.layout.colorway[i] = $event.data;
      }
    });
    if(changed) {
        this.layout = {...this.layout}; // <- creates a new reference!
    }
    this.cdRef.detectChanges();
  }