Horizontal scrolling of charts

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2012 Link to this post

    Hi

    I was wondering if there was a way to enable some sort of horizontal scrolling for DataVis charts. I have a column chart with a number of coumns, but occasionally there are too many columns to fit adequately (at a reasonable size) on a screen. Furthermore, our software will be used on some screens where screen space is limited, so a scrolling mechanism of some sort would be necessary.

    I wasn't able to find anything in the documentation, but thought perhaps I could set a minimum width of sorts for the columns and put the graph in an "overflow: scroll" style div. Is this possible?

    Regards, Andrew
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 26 Mar 2012 Link to this post

    Hello Andrew,

    Generally speaking the horizontal scrolling of Charts is not supported out of the box, but you could achieve the described functionality using custom styling. For example:
    • 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.

    I hope this helps. 

    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Armin
    Armin avatar
    3 posts
    Member since:
    Jul 2014

    Posted 18 Aug 2014 in reply to Iliana Nikolova Link to this post

    Iliana Nikolova said:
    you could achieve the described functionality using custom styling. For example:
    • 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.
     

    Your suggested workaround will work, granted... but doing it this way will also scroll away the much needed Axis. Is there any way to keep the Axis on the screen, especially on mobile devices (so no pan & zoom as suggested elsewhere)!
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Aug 2014 Link to this post

    Hi Armin,

    I am afraid this scenario is not supported by Kendo UI Chart and there is no a better workaround I can suggest. Please accept my apologies for any inconvenience this may cause.

    On a side note, if your chart is with date axis you may consider using Kendo UI Stock Chart.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top