Dynamic Width kendo-angular chart

[Federico]

How i set the dynamic width for chart?

I'd like to get the dynamic horizontal scrollable

 

<kendo-chart #chart renderAs="canvas"        (seriesClick)="onSeriesClick($event)">
 <kendo-chart-title text="APP"></kendo-chart-title>
<kendo-chart-legend position="bottom"></kendo-chart-legend>
<kendo-chart-tooltip [shared]="true"></kendo-chart-tooltip>
<kendo-chart-series>
<kendo-chart-series-item
*ngFor="let item of DataList"
[data]="item.worked_hours_month"
[name]="item.worker"
field="worked_hours"
categoryField="month">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>

 

 

[Dimiter Topalov]

Hello Federico,

I am afraid that I do not fully understand the desired functionality. In general, you can set the Chart component dimensions via providing a style attribute (or binding) with the respective values:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/styling/

This way a horizontal scrollbar will appear when the set Chart width exceeds the available viewport width:

https://stackblitz.com/edit/angular-qvc1rt?file=app/app.component.ts

You can also wrap the Chart in another element and style the wrapper such that it will be the scrollable element as opposed to the whole page:

https://stackblitz.com/edit/angular-qvc1rt-9ey5a1?file=app/app.component.ts (in both examples, resize the right-hand side preview section to observe the behavior when the Chart/wrapper width exceeds the available viewport width).

The panning and zooming capabilities also allow for displaying a varying amount of data:

https://www.telerik.com/kendo-angular-ui/components/charts/chart/styling/#toc-limiting-the-displayed-range

I hope this helps, but if I am missing something, please describe the scenario and the desired functionality in further details, so I can try providing a suggestion that is most suitable to the specific use case (if one is available). Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik