how to swap my data of graph on both axis, like label and data of x axis on y axis and vice versa in chart js

Viewed 9

Here I have created dropdown for 2 labels and want its data to be swapped when selected from dropdown on x and y axis. I want the data to be swapped on both axis.

.html

   <select class="dropdown" name="chartType" id="chartType" (change)="chartType($any($event.target).data)">
        <option selected>Select Axis</option>
        <option value="a1">IR</option>
        <option value="a2">IY</option>
      </select>

    <div class = "chart" >
        <canvas id="canvas"> {{charts}} </canvas>
     
    </div>

.ts
 
    chartType(type: any) {
        if (this.charts) {
          this.charts.destroy();
        }
        this.charts = new Chart('canvas', {
          type: type,
          data: {
            labels: this.a2,
    
            datasets: [{
              label: 'IR',
              data: this.a1,
              borderWidth: 3,
              backgroundColor: 'red',
              borderColor: 'red'
    
            },
            {
              label: 'IY',
              data: this.a2,
              borderWidth: 3,
              backgroundColor: 'black',
              borderColor: 'black'
    
            }
0 Answers
Related