Hello!
I am using area charts in my application that use multiple series in the chart. I want to use the Shared Tooltip to show the data for the day for all the series on the chart.
I got this working by using <ChartTooltip shared={true} />. The problem I am facing is the tooltip renders just to the right of the mouse pointer. This does not allow the user to seamlessly move the mouse to the right and see the progression of the data as the days go on because the mouse pointer moves over the tooltip and stops the sliding on the chart.
I have looked through the docs and I cant find anything on how to render the tooltip to a custom position that will move the tooltip out of the range of the mouse. Is there such a way? or a way to disable the mouseover event on the tooltip?
In the screenshot, the mouse is not captured but it is directly to the right of the tooltip. As you can see if I move the mouse right it will hover over the tooltip and wont show me for the next day.
Thanks!
Nate
1 Answer, 1 is accepted
Hello, Nathaniel,
Currently, the Tooltip has only the default position available.
Is possible to update this example to showcase the issue, this will help us see if there is another option we can offer:
https://stackblitz.com/edit/react-jk7tmn?file=app/main.jsx
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thank you for the response. After looking at your example, I see what my issue is. The Shared Tooltip does render at the series entry which is expected.
My Charts however have daily data points for months (so the tooltip just seems like its rendering on the mouse but really if I cut down the number of data points it would work fine.
Thanks!
Rank 1
Stefan
https://stackblitz.com/edit/react-jk7tmn-xedacg?file=app/main.jsx
Updated the project. If you view it half screen you can see the issue with many data points. Moving the mouse to the left the user can seamlessly hit every data point, but moving to the right, the user skips some
Hello, Nathaniel,
Thank you for the example.
Yes, I agree that in this setup based on where the user places the mouse this can prevent hovering some points. Still, if we change the position then this can occur in another direction as Tooltip will still take space in a place around the current point.
I made a short video where it can be seen that overall the user can access all of the points by moving the mouse away from the tooltip. The tooltip will be shown on the full horizontal length of the point not only over it.
Rank 1
Stefan,
Thank you for the video and looking into this. I agree, anywhere you move the tooltip it could be in the way of the users mouse. I may just need to rethink how many data points I want to display. :)
Thanks!
Hello, Nathaniel,
If showing multiple point is something that has to be considered I can suggest taking a look at this selection demo. It allows the user to control how many points they want to see, this will leave the decision on how many point to be visible in the user preferences:
https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/selection/#toc-using-selection-as-navigator
Rank 1
Hi Stefan,
This is a great solution and think it might be one we consider. I am taking it to my team now for discussion.
Thank you so much!
Nate