Below is the code to re arrange a dynamic plotly-plot bar chart’s bars on up and down button click, No ordering of bars required, want to interchange the bars based on up down arrow click. Chart Legends are interchanging, but chart bars not shifting its position

Html

<div style="background-color: green; height: 20px">
  <button (click)="upBar()">Up</button>
  <button (click)="downBar()">down</button>
</div>

 <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 }"
        (legendClick)="launchColorPicker($event)"
      >
      </plotly-plot>

Typescript

barClickedEvent($event) {
        let graphData = [];
        let graphBarIndex = this.graph.data.findIndex((x) => x.name === $event.currentBarData.name);
        if (graphBarIndex !== -1 && graphBarIndex < this.graph.data.length - 1) {
          const foundItem = this.graph.data.splice(graphBarIndex, 1)[0]; // Remove the item from current index
          if ($event.barPosition === 'up') {
            graphBarIndex += 1;
            graphData = this.setGraphBar(graphBarIndex, foundItem);
          } else {
            graphBarIndex -= 1;
            graphData = this.setGraphBar(graphBarIndex, foundItem);
          }
          this.graph.data = [];
          this.graph.data = [...graphData];
        }
        console.log('barClickedEvent', $event);
      }