CODEWITHSUNDEEP
angularkendo-uikendo-chart
sfaust
sfaust

Reputation: 2373

Kendo Angular Chart change legend position based on size

I'm using a Kendo chart component for Angular. On a full size screen I would like the legend component to the right of the main chart, but on small screens and mobile it gets a little cramped so to be more responsive I would like to move it to the bottom of the chart for small screens.

The issue is that the position is a separate attribute on the legend tag, not a style so as far as I can tell I can't do a media query to change it...

I Googled around and found plenty on how to position the legend, but not to do so dynamically based on size. Is there a way to do this that I'm missing? I'm still semi-new to responsive html/css so entirely possible I'm missing something simple but I can't find a way to do it...

Upvotes: 0

Views: 1509

Answers (2)

SlowMagic
SlowMagic

Reputation: 1

You can change position, visible or orientation of your legends like this 

@ViewChild(ChartComponent) chartComponent: ChartComponent;

and later

this.chartComponent.configurationService.store.legend.orientation = 'horizontal';      
this.chartComponent.configurationService.store.legend.position = 'bottom';
this.chartComponent.configurationService.store.legend.visible = false

Upvotes: 0

buchipper
buchipper

Reputation: 654

We did something like this - 

<div class="row">
    <div class="*ngIf="ShowChart" col-sm-4">
      <kendo-chart style="height: 175px;">
        <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        <kendo-chart-area background="none"></kendo-chart-area>
        <kendo-chart-series>
          <kendo-chart-series-item
              type="donut" [startAngle]="150" [data]="data" 
              categoryField="field" field="value" colorField="color" [visual]="customVisual"
              [size]="30">
          </kendo-chart-series-item>
        </kendo-chart-series>
      </kendo-chart>
    </div>
    <div class="legend col-sm-8" [ngClass]="{'col-sm-8': ShowChart, 'col-sm-12': !ShowChart}">
        <table style="width: 100%">
            <tr *ngFor="let legendItem of ChartData.slice(0, 5); last as last;let i = index">
                <td>...</td>
            </tr>
        </table>
     </div>
</div>

This way, we were able to show the chart above and the legends below or next to each other based on the screen resolution.

Upvotes: 1

Related Questions