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

Fix plotArea width of chart

7 Answers 175 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Symax
Top achievements
Rank 1
Symax asked on 28 Jan 2014, 04:38 PM
I'm working with a Kendo Stack Bar Chart to show the percentage of a centain count by category, but also, if the label on the category axis get clicked I wanna show, right in the middle of the chart, a grid with the details of that category.

I found a solution by showing two Stack Bar Charts, the firstone using a filter on the index from the begining to the clicked index, and the second one from the clicked index to the end. So, it will look exactly like the complete Chart, but splitted in the middle by the details grid. And calculating the div height of the top and the bottom chart.

My problem now is that, because of the autosize of the plotArea, depending on the size of the labels, the two charts, with the grid in the middle, are not aligned.

I first try to reduce this difference by adding a shortLabel() function on the template of the labels of the categoryAxis ( it will look like this: "Biiiiiig laaaabeeel" => "Biiiii... eeel"), and now is better, but beacuse of the difference in pixels size of the letters, is not exactly aligned. Also, I can't find a way to show in a tooltip, or something similar, the complete label after it was shorted.

Here is a jsfiddle with an example showing what I mean: http://jsfiddle.net/ralexrdz/FMec4/

I've been trying, without success, a property I can change so I can fix the plotArea width, and also, trying to put in the label a <span title="#=value#">#= shortLabel(value)#"</span>, without success either.

Any ideas?


Thank you very much!

7 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 30 Jan 2014, 09:08 AM
Hello,

I already posted a reply in your other thread, however I am pasting my answer too:

I am afraid this scenario is not supported by Kendo UI Chart. As a possible workaround I can suggest the following: 
  • Hide the categoryAxis.labels (categoryAxis.labels.visible false);
  • Use HTML table with two columns - in the first one display the category names, in the second one display the actual charts.   
I realize this is not a perfect solution, however there is no a better on I can suggest. 

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
Symax
Top achievements
Rank 1
answered on 30 Jan 2014, 09:45 AM
And what about the tooltiping on the category axis labels? is it possible?

I think I'm using this kendo control instead of splitting the table:
Kendo UI Window

Thanks a lot!
0
Iliana Nikolova
Telerik team
answered on 31 Jan 2014, 04:35 PM
Hi,

At this point Kendo UI Chart does not support tooltip for its axes. As a possible workaround I can suggest using the axisLabelClick event and displaying for example a Kendo UI Window which displays additional information. 

Regards,
Iliana Nikolova
Telerik

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
j
Top achievements
Rank 1
answered on 10 Feb 2014, 05:10 PM
Hi Iliana

Can you please advise on the workaround you mention above:
"Use HTML table with two columns - in the first one display the category names, in the second one display the actual charts."

How would you achieve this?  

Thanks
Jose
0
Iliana Nikolova
Telerik team
answered on 11 Feb 2014, 09:26 AM
Hi Jose,

I provided an example in your other thread, however I am pasting it here too. Keep in mind this is an example implementation and you may need some adjustments for your particular case.

Regards,
Iliana Nikolova
Telerik

Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

0
David
Top achievements
Rank 1
answered on 30 Sep 2015, 12:28 PM

Is setting the width and height on the PlotArea in consideration in the future?  Why is it not in the first place?  You can set the ChartArea but not the PlotArea!  It be nice to set a defined width for the PlotArea so that you can manage the Legend labeling issues like when it's too long.  This allows the Pie Chart to stay the same size in scenarios where you have multiple pie charts in a dashboard.

Making your own legend outside of the chart has it's own problems like coordinating the colors if you do not set the colors manually.  

0
Iliana Nikolova
Telerik team
answered on 02 Oct 2015, 10:19 AM
Hi David,

Setting fixed plotArea width / height is not planned for implementation. If you have a minute, please file a feature request at our UserVoice portal - this will help to gauge the overall interest and prioritize. 

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
Symax
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Symax
Top achievements
Rank 1
j
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or