Kendo Angular Chart change legend position based on size

0
votes

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...

2
angularkendo-uikendo-chart
We had a similar issue and we ended up disabling the legends on the chart and created our own legends container. This way we had the chart in one div and the legends in another and we used bootstrap to make them responsive. - buchipper
So was the legend tag outside of the chart tag then? I guess I assumed it had to be inside it... - sfaust

2 Answers

1
votes

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.

0
votes

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