Make a Kendo Area chart go horizontal

7 posts, 0 answers
  1. Paul
    Paul avatar
    105 posts
    Member since:
    Jun 2010

    Posted 10 Nov 2016 Link to this post

    Title says it. I have a stacked area chart with a few series in it. I want to flip the chart so the values go horizontally instead of vertically. Is this possible?
  2. Paul
    Paul avatar
    105 posts
    Member since:
    Jun 2010

    Posted 11 Nov 2016 Link to this post

    Attached is the current chart as I have been able to get so far, as well as the desired result that I actually want. I did this in MS Paint so it's not perfect.

  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2611 posts

    Posted 14 Nov 2016 Link to this post

    Hi Paul,

    The outcome, illustrated in desired-result.png is not supported out-of-the-box by Kendo UI Chart. As workarounds I would suggest the following options:  
    - Use stacked bar chart instead of area:

    http://demos.telerik.com/kendo-ui/bar-charts/index

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-seriesDefaults.stack


    - Use CSS transformation and rotate the chart: 

    http://dojo.telerik.com/@Iliana/UtAKO


    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  4. Paul
    Paul avatar
    105 posts
    Member since:
    Jun 2010

    Posted 14 Nov 2016 Link to this post

    Thank you for the reply. This doesn't work unless there is an option to fix the bar color.

     

    For example, look at my current chart and my desired chart at 8:00 (first value). You'll see one gray box and one red box. The series value for each of these is 1.

    When I use a stacked bar chart, I get 1 box not two. And the color is gray + red. I should see 1 gray and 1 red box. These cannot be combined together.

    It's like the Stack property isn't working:
        .SeriesDefaults(sd => {
            sd.Bar().Stack(true).Opacity(0.9);
         })

    Also, the legend doesn't seem to contain an option to rotate it 270 degrees to offset the rotation of the chart itself.

  5. Paul
    Paul avatar
    105 posts
    Member since:
    Jun 2010

    Posted 14 Nov 2016 in reply to Paul Link to this post

    Not sure why I would switch to "stacked bar" as mentioned. I put it back to "area" and it's working again as expected. I still need to flip the legend rotation which I'll work on next.
  6. Paul
    Paul avatar
    105 posts
    Member since:
    Jun 2010

    Posted 14 Nov 2016 Link to this post

    I have code in place to rotate the legend. I cannot mark this question as answered. The link doesn't work.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2611 posts

    Posted 16 Nov 2016 Link to this post

    Hi Paul,

    Regarding the suggestions from my previous post: 
    - Using a stacked bar chart will help to get legend as demonstrated in the desired-result.png
    http://dojo.telerik.com/@Iliana/iLuHe

    - In order to rotate legend when chart is rotated via CSS transformations you could use the legend.item.visual option: 

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.item.visual

    https://demos.telerik.com/kendo-ui/bar-charts/visuals

    For your convenience below is an example which should give a basic idea: 

    http://dojo.telerik.com/@Iliana/ineKA

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top