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

Kendo Chart Marker on Hover

6 Answers 1403 Views
Charts
This is a migrated thread and some comments may be shown as answers.
shaneed
Top achievements
Rank 1
shaneed asked on 02 Feb 2017, 02:36 PM

We have a multi plot line chart where we have default circle markers with white background, which works fine. But when 2 plots intersect at a point hovering to find the correct tooltip is a problem.So we can with the design to stop showing the marker circles and a show a horizontal dotted line moving with the mouse. When we come upon a category axis label 3 bubbles/dots corresponding to the three plots should appear on it, not on the series plot itself (as 2 plots are coinciding). They should appear at fixed height intervals and on hover should how a bubble glow effect and the corresponding tooltip should come. Now can this be done.

As far I have seen through kendo only markers on plots can be zoomed or changed on hover (no effects), also they will stay on the plot line (meaning in our case 2 markers will coincide). Also is there a vertical hover line.

I am attaching an image made in another tool for reference.

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 06 Feb 2017, 08:32 AM
Hello,

I am not sure if I correctly understand the requirement but you can use crosshair for the categoryAxis to show the line. To show a tooltip no matter if the points have the same position, I can suggest to use a shared tooltip. The configuration is demonstrated in this demo. 

Regards,
Daniel
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
shaneed
Top achievements
Rank 1
answered on 11 Feb 2017, 01:27 AM

Hi Daniel,

Yes crosshair was what exactly I wanted, but instead of shared tool tip is it possible to show the bubbles on the crosshair line but not exactly on the series line itself, a little above them so that when the user hovers over them it can show an animation effect an the tool tip. As I said in the original post if 2 plots intersect at one point (each plot having its own value axis) it is difficult for the user to pop exactly the tooltip of the plot he wants to observe. Lets say series 1 and series 2 coincide graphically for their values ("1 Feb", 1.9) and ("1 Feb", 5.3) now which one tool tip will it actually show is difficult. Having shared tooltip is useful here but for mobile platforms it becomes a bit big and space consuming.

Also is it possible to show an animation effect on hovering a marker.

0
Daniel
Telerik team
answered on 14 Feb 2017, 03:51 PM
Hello,

The described functionality is not supported. Something similar can be achieved by using custom visual and the drawing API - example. However, based on the description and the image I am not sure if I understand how should the markers position be determined. Could you clarify?

Regards,
Daniel
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
shaneed
Top achievements
Rank 1
answered on 27 Feb 2017, 08:08 AM

Hi Daniel,

Sorry for the delayed response. The example you gave is partly what I wanted, just one thing more is needed. If you look at year 2005 in your example two markers are overlapping and its difficult to hover over one exactly. Our UI team does not want shared tool tip but rather each marker at 8px distance from each other from the x-axis on the crosshair line. That is from the example from x-axis on the crosshair line at 8px height the marker for one series, next another 8px (that is 16px height from x-axis) marker for the second series and finally at 24px height marker for the third series.

0
Accepted
Daniel
Telerik team
answered on 28 Feb 2017, 07:04 AM
Hi,

In that case you could get the axis y coordinate using the slot method and position the highlight visual based on the series index - example.

Regards,
Daniel
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
shaneed
Top achievements
Rank 1
answered on 02 Mar 2017, 01:26 PM
Perfectly fits our requirements. Thanks for the help Daniel.
Tags
Charts
Asked by
shaneed
Top achievements
Rank 1
Answers by
Daniel
Telerik team
shaneed
Top achievements
Rank 1
Share this question
or