This is a migrated thread and some comments may be shown as answers.

Make a Kendo Area chart go horizontal

6 Answers 56 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 10 Nov 2016, 11:30 PM
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?

6 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 1
answered on 11 Nov 2016, 02:41 PM

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.

0
Iliana Nikolova
Telerik team
answered on 14 Nov 2016, 08:04 AM
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.
 
0
Paul
Top achievements
Rank 1
answered on 14 Nov 2016, 04:24 PM

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.

0
Paul
Top achievements
Rank 1
answered on 14 Nov 2016, 04:29 PM
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.
0
Paul
Top achievements
Rank 1
answered on 14 Nov 2016, 06:53 PM
I have code in place to rotate the legend. I cannot mark this question as answered. The link doesn't work.
0
Iliana Nikolova
Telerik team
answered on 16 Nov 2016, 11:27 AM
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.
 
Tags
Charts
Asked by
Paul
Top achievements
Rank 1
Answers by
Paul
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or