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

Single tooltip for all series in a category

10 Answers 476 Views
Charts
This is a migrated thread and some comments may be shown as answers.
JamesD
Top achievements
Rank 1
JamesD asked on 29 Oct 2013, 11:10 AM
Hi

Is it possible to show a tooltip for all series' values when hovering mouse anywhere in a category column as shown in attached illustration?
Specifically we are using date axis.
Thanks

V.

10 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 30 Oct 2013, 09:18 AM
Hello V,

In order to achieve this you should use a shared tooltip:  

$("#chart").kendoChart({
  //....
  tooltip: {
     visible: true,
     shared: true
  }
});
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
JamesD
Top achievements
Rank 1
answered on 30 Oct 2013, 12:06 PM
Thank you, Iliana, the feature is great.

There is an issue with datetime axis though:
The category name (tooltip head) isn't copied from axis, but a standard-formatted (mm/dd/yyyy) date is displayed as instead.
My date range and thus baseUnit is dynamic (set to "fit").
I tried to use sharedTemplate - here the category field returns completely unformatted datetime value.
Can I retrieve 
The category formatted as on the axis?
OR
the format-string used on the axis for current baseUnit?
OR
at least the actual baseUnit in use?

V
0
Iliana Dyankova
Telerik team
answered on 01 Nov 2013, 09:54 AM
Hi V,

I am afraid what you would like to achieve is not supported by Kendo UI Chart at this point. The only possible workaround I can suggest is setting manually the tooltip format in the tooltip.template:

$("#chart").kendoChart({
  //....
  tooltip: {
     visible: true,
     shared: true,
     template: "#= kendo.format('{0:dd/MMMM/yyyy}',category) #"}
});
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
JamesD
Top achievements
Rank 1
answered on 01 Nov 2013, 10:04 AM
Yes, that's what I'm trying to do with sharedTemplate. 
Depending on the range I  need different format string. E.g. month or week or time only just as on the axis.

The meaning of previous question was if I could somehow get that actual format string from kendoui internals or at least calculated base unit to decide whitch format string to use?
Thanks.

 V.

0
Iliana Dyankova
Telerik team
answered on 05 Nov 2013, 01:26 PM
Hi V,

I am afraid there is no a property which contains the discussed format, however we will do our best to provide an option for future releases. Please excuse us for the inconvenience caused.

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
JamesD
Top achievements
Rank 1
answered on 28 Jan 2014, 08:17 AM
Just reminded that it is actually possible to retrieve the actual unit used:
http://www.kendoui.com/forums/kendo-ui-dataviz/chart/determine-actual-calculated-baseunit-when-set-to-'fit'-.aspx

(and then use script to do the formatting)

V.
0
Dan
Top achievements
Rank 1
answered on 18 Oct 2017, 04:11 PM
Has there been any change in this?  I still have the same scenario where my X-Axis is set to just have Month and Year (Oct 2017), but the header in the shared version of the tooltip shows 10/1/2017 despite the fact that the underlying data is actually something like 10/18/2017.  It seems to be taking the formatted value and then transforming it to a full date format.
0
Stefan
Telerik team
answered on 20 Oct 2017, 01:45 PM
Hello, Dan,

I can suggest using a template for the shared label:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-tooltip.sharedTemplate

I made an example demonstrating this. If the scenario defers, please modify the example and I will gladly assist:

http://dojo.telerik.com/IsinO/2

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ben
Top achievements
Rank 1
answered on 14 Jan 2021, 09:33 PM

Applying JamesD's suggestion to Stefan's example yields something like this:

http://dojo.telerik.com/OkONAtEM/56
0
Ben
Top achievements
Rank 1
answered on 14 Jan 2021, 09:33 PM

http://dojo.telerik.com/OkONAtEM/56

 

(No auto-linking here?)

Tags
Charts
Asked by
JamesD
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
JamesD
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Stefan
Telerik team
Ben
Top achievements
Rank 1
Share this question
or