Multiple Charts Alignment

[Andy]

Hello,

We have multiple charts dynamically added to the page which are vertically stacked. We have a problem with the alignment of the charts - see attached image. The alignment issue is due to the varied character length of the categories displayed in the category axis.

One workaround we've tried to implement is to truncate the category text. This almost works but the graphs are still slightly out of line; we also need to have a tooltip displayed when the users hover their cursor above the category axis labels.

1) How may we add a tooltip for the the category axis labels?
2) Can you suggest how we may align the charts more accurately?


Kendo version: Kendo 2014 Q1.

Many thanks,

Andy

[Iliana Dyankova]

Hello Andy,

Up to the requirements: 
1) How may we add a tooltip for the the category axis labels?
Currently Kendo UI Chart does not support tooltip for the axes. Actually this idea has been already submitted as a feature request at our UserVoice page - you may cast a vote, leave a comment or monitor the cummunity's interest in it here. The more votes the suggestion collects, the higher priority will have;
2) Can you suggest how we may align the charts more accurately? There is no a universal solution for this case. As a bit different approach I would suggest to adjust the plotArea.margin.left (a dojo example)

Regards,
Iliana Nikolova
Telerik

 

 

[Andy]

Thanks for your reply Iliana. I think I will need  to vote for the tooltip feature.

Regarding the plotArea.margin.left suggestion, I did try to implement this but without positive results. Our category axis labels are dynamic so their text lengths are prone to vary when charts are loaded.  I calculated the greatest length for all the categories in all the charts and tried to adjust the margins accordingly. The margins did alter but the alignment is never spot on. 

chart.setOptions({ plotArea: { margin: { left: chartsToResize.maxCategoryTextLength } } });

Maybe I need to be adding something else to the calcs?

Andy

[Iliana Dyankova]

Hi Andy,

As I said in my previous reply, the margins should be adjusted for all charts separately. I realize this is not a perfect solution, however there is no a better one which I can suggest. Please accept my apologies for any inconvenience this may cause.

Regards,
Iliana Nikolova
Telerik

 

 

[Matthew]

Hi,  

This is an old thread, has anything changed?  I too would like to align the axis as in the original post.  Ideally I'd calculate text length for all charts and then set the xaxis offset (from left side).

Thanks, Matt

 

[Nikolay]

Hi Matthew,

I am afraid this is still valid for the alignment of stacked Charts. Using the "plotArea.margin.left" option to adjust distances is the right way to go:

• https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/plotarea#plotareamarginleft

Regards,

Nikolay