Angular Kendo Charts horizontal scrollbar

[lucas]

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>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item
                  [categories]="month"
                  [title]="{ text: 'Months' }">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-legend position="bottom" [visible]="false"></kendo-chart-legend>
  <kendo-chart-series>
    <kendo-chart-series-item type="line" 
                  [style]="normal" categoryField="month" 
                  [data]="Totaldata" field="total" 
                  [markers]="{ visible: true }">
   </kendo-chart-series-item>
 </kendo-chart-series>

[Slavena]

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:

[pannable]="true"

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

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

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:

https://stackblitz.com/edit/angular-yfuroj-7zxa3q?file=app/app.component.ts

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.

Regards,
Slavena
Progress Telerik