Angular Kendo Charts horizontal scrollbar

1 Answer 956 Views
Charts Upload
Top achievements
Rank 1
lucas asked on 02 Jul 2021, 12:52 PM

I would like to add a horizontal scrollbar so that I can clearly view all the graph data.


for example: if I had all 12 months of the year I would like to see those of 2019 and then with the scroll bar go to 2020 and 2021. through the parameter that identifies the X axis.


<kendo-chart (seriesClick)="onSeriesClick($event)">
  <kendo-chart-title text="title"></kendo-chart-title>
                  [title]="{ text: 'Months' }">
  <kendo-chart-legend position="bottom" [visible]="false"></kendo-chart-legend>
    <kendo-chart-series-item type="line" 
                  [style]="normal" categoryField="month" 
                  [data]="Totaldata" field="total" 
                  [markers]="{ visible: true }">

enter image description here

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 07 Jul 2021, 06:25 AM

Hello Lucas,

Thank you for the provided details.

In order to meet the requirements, I would suggest using the panning built-in functionality of the Chart which allows dragging the Chart's content horizontally to display different areas of the component while keeping the Y-axis position fixed and visible all the time. In order to enable panning the pannable property of the Chart component should be set to true:


Here is an example that demonstrates the panning functionality in action:

Another approach for enabling horizontal scrolling for the Chart is setting overflow: auto and width properties of the k-chart class and setting the width of the k-chart-surface class to a value higher than its parent's width:

.k-chart {
    overflow: auto;
    width: 600px;

.k-chart-surface {
    width: 800px;

This approach is demonstrated in the Stackblitz demo below:

Please note that the encapsulation mode should be set to ViewEncapsulation.None so that the custom styles could be applied.

This approach however is considered rather a workaround and I would suggest utilizing the built-in functionality.

I hope this helps. Let me know if further assistance is required on this case.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Charts Upload
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question