how to place Legend below the Rose Graph in reponsive model in Angular app?

Question

I try to get my "Legend" below the graph data in reponsive mode but I do not know how. I use ngx-echarts - Rose Graph

        title: {
          text: 'Smer vetra',
          
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          align: 'auto',
          bottom: 10,
          data: this.thingSpeakHistoryWindDirectionsTypes
        },
        calculable: false,
        series: [
          {
            name: 'Smer vetra',
            type: 'pie',
            radius: [30, 110],
            roseType: 'area',
            data: 
              this.thingSpeakHistoryWindDirectionsValues
          }
        ]
      };

and in HTML file I just call my variable with graph

<div echarts [options]="thingSpeakTextGraph" [theme]="theme" class="demo-chart"  *ngIf="hideGraphThingSpeak"></div>

here is how it looks