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

Multiple Charts Alignment

3 Answers 168 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 25 Jul 2014, 02:22 PM
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


3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 29 Jul 2014, 07:56 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Andy
Top achievements
Rank 1
answered on 29 Jul 2014, 03:51 PM
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




0
Iliana Dyankova
Telerik team
answered on 31 Jul 2014, 02:19 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Matthew
Top achievements
Rank 1
commented on 22 Sep 2021, 08:22 AM

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
Telerik team
commented on 24 Sep 2021, 06:17 AM

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:

Regards,

Nikolay

Tags
Charts
Asked by
Andy
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Andy
Top achievements
Rank 1
Share this question
or