Creating scrollable Charts using Angular-Kendo

Creating Scrollable Charts:

Horizontal scrolling of Charts is not supported out of the box in Kendo UI, however it can be achieved using a bit of custom styling.

Basic steps:

• Set overflow: auto of the <div class="chart-wrapper">;
• Set width of the aforementioned div;
• Set width of the <div id="chart"> to a value higher than it’s parent div width size.

Example piece of code:

Template:

<div class="parent-container">
  <div kendo-chart k-options="line" class="chart-container">
  </div>
</div>

CSS:

.parent-container {
    overflow-y: scroll; 
    width: 1000px;
}

.chart-container {
    overflow: auto; 
    width: 2000px;
}