Fix plotArea width of chart

[Symax]

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!

[Iliana Dyankova]

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

[Symax]

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!

[Iliana Dyankova]

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

[j]

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

[Iliana Dyankova]

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

[David]

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.  

[Iliana Dyankova]

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