Make a Kendo Area chart go horizontal

[Paul]

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?

[Paul]

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.

[Iliana Dyankova]

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

 

 

[Paul]

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.

[Paul]

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.

[Paul]

I have code in place to rotate the legend. I cannot mark this question as answered. The link doesn't work.

[Iliana Dyankova]

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