Kendo Chart Marker on Hover

7 posts, 1 answers
  1. shaneed
    shaneed avatar
    23 posts
    Member since:
    Jun 2013

    Posted 02 Feb Link to this post

    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.

  2. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 06 Feb Link to this post

    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.
  3. shaneed
    shaneed avatar
    23 posts
    Member since:
    Jun 2013

    Posted 10 Feb Link to this post

    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.

  4. Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 14 Feb Link to this post

    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.
  5. shaneed
    shaneed avatar
    23 posts
    Member since:
    Jun 2013

    Posted 27 Feb in reply to Daniel Link to this post

    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.

  6. Answer
    Daniel
    Admin
    Daniel avatar
    2173 posts

    Posted 28 Feb Link to this post

    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.
  7. shaneed
    shaneed avatar
    23 posts
    Member since:
    Jun 2013

    Posted 02 Mar in reply to Daniel Link to this post

    Perfectly fits our requirements. Thanks for the help Daniel.
Back to Top