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;
}
Advertisements

About Sayak Sarkar

Web Ninja, Open Source Evangelist, Mozillian, Geek, Currently working as a Web Developer at Red Hat. In the past I've worked at Mozilla Foundation, Software Development & Research Cell at SICSR. Originally from Kolkata, West Bengal. Open Source Contributor with a special interest in Web Development. Follower of all updates related to Free and Open Source Software.

Posted on May 26, 2014, in AngularJS, How-to Guides, Kendo UI, Technology, Web Development and tagged , , , , , , , , , , , , , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: