Last Updated: 30 Sep 2022 06:35 by ADMIN
Created on: 29 Sep 2022 18:54
Type: Feature Request
Implement hover onNearest for tooltips for Kendo React Charts


I would like to request a feature for the hovering to show tooltip behaviour in Kendo React Charts.

Currently, the tooltip on hover behavior for most or almost all Kendo React Charts is that it shows the tooltip only if you hover directly on a point or bar. This means that upon hovering on tiny data representation like dots or bars will be very difficult for the user to show a tooltip for.


For example the following sandboxes:

Bar graph with small and large data: https://stackblitz.com/edit/react-xtmkdz?file=app%2Fmain.jsx

Line graph with small data dots and large data dots:  https://stackblitz.com/edit/react-wg75ag?file=app%2Fmain.jsx

In these sandboxes, hovering over the smallest bar is very difficult and is also the same for the line graph for tiny "marker" sizes.


I am requesting a feature where Kendo React Chart tooltip can:

  • Hovering anywhere in chart plot area will show a tooltip, not only on point.
  • Tooltip shown will the the nearest data to the point. Ie: on line graph would be closest point. On Bar graph will be nearest bar vertically.


I have seen this feature in other popular React Chart libraries like Recharts https://recharts.org/en-US

Bar chart:

In this example, hovering anywhere inside that grey box area with mouse will show tooltip for that Page A:

For line charts in Recharts: https://recharts.org/en-US/examples/SimpleLineChart


Hovering at the drawn mouse location in this chart shows tooltip for the point below.


I am hoping Kendo React in the future supports this feature as the current implementation of the tooltip is very rigid and clunky.



1 comment
Posted on: 30 Sep 2022 06:35


Thank you for the submitted feature request, Oleksandr! We will monitor closely the interest in this improvement.

Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.