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

Is there an option for a chart that looks like a centered stacked bar?

8 Answers 70 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 25 Jun 2015, 04:56 PM

Hi, 

In our mobile app (limited screen to work with, naturally) - We would love to have a chart that displays 2 bars per "record" - that are centered in the middle of the chart. The obvious application is an income/expense chart, where the middle line is the "0" value and to the right we show the income in green, with the expense to the left in red.

We are not sure if there is a way to do it with the current stacked bar chart type (or any of the others offered in KendoUI) - and would love to see if there is something we did not see or if this is something that might be added to a future release.

 We attached a very "artistic" drawing showing the idea.

Thanks for any pointers,

Ron.

8 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 29 Jun 2015, 08:03 AM

Hi Ron,

You could achieve the illustrated outcome using series with positive and negative values. For your convenience here is a basic example.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 01 Jul 2015, 09:54 AM
Thanks. Elegant.
0
Ron
Top achievements
Rank 1
Veteran
answered on 27 Aug 2015, 04:25 PM
Hi Iliana,

We now have the following issue - using this layout the category labels are not positioned well. Please have a look at the following dojo:  http://dojo.telerik.com/UkUqA

Is there a way to position the category labels centered above the bar, as in the attached illustrating image?

Thanks,
Ron.
0
Iliana Dyankova
Telerik team
answered on 31 Aug 2015, 09:06 AM
Hi Ron,

In order to achieve this you could set categoryAxis.labels.margin. For your I modified the dojo

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 06 Sep 2015, 12:42 PM

Thank Iliana,
We know the margin option but this solution, as appears in your dojo, is not relevant to our case. The dojo was simplified and did not present our real case, in which we have categories of various length. As you can see in the updated dojo - same as the last one you prepared but with correct categories, the margin does not solve the situation: http://dojo.telerik.com/ogOWa

- Is there a way to have categories of various labels centered correctly? 
- If not: Is there a way to "push" the categories to the right side of the chart? (meaning the category label will end exactly at the right border of the chart area)

 

Thanks,

 Ron.

0
Iliana Dyankova
Telerik team
answered on 08 Sep 2015, 03:26 PM
Hi Ron,

Thank you for the modified example. I am afraid that there is no an option for centering labels of various length. What I can suggest instead is moving the categoryAxis and mirroring the labels - take a look at this dojo and let me know if this will fit the current requirements.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 08 Sep 2015, 07:07 PM

Thank Iliana,

 

Per usual, you are a fountain of knowledge...


This is exactly what we tried to achieve - we were not familiar with the axisCrossingValue property.

 

Best Regards,
Ron.

0
Iliana Dyankova
Telerik team
answered on 10 Sep 2015, 07:42 AM
Hi Ron,

I am glad to hear the suggested solution helped :) 

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Iliana Dyankova
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or