How to enable users to smoothly select data points when the line chart data is close.

[Hu]

Hi,
I am using kendo React Line chart in my project. When the line-chart data is close, the points will overlap, and the tooltip also will affect the user's selection of data. Do you have any good suggestions to solve this situation?
What I am currently thinking of is to filter the data by clicking on the legend, so that I can select points.

Looking forward to your reply, thanks in advance！

Y65b36 (forked) - StackBlitz

 

Regards,
Sunny Hu

[Konstantin Dikov]

Hi Hu,

What we can suggest as a solution for this scenario is enabling the shared ToolTip, which displays all values for all categories. You can check in the following example the result after enabling the "shared" property of the ChartTooltip:

• https://stackblitz.com/edit/react-i2djxs-rx1rem?file=app%2Fmain.jsx

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Hu]

Thank you for your reply. My scenario is that the user can click on each data point. After obtaining the data point, I will do some follow-up logic.

I'm very sorry, I can't upload the video. Is it possible for customize the position of the tooltip? When I move the mouse along the orange arrow until it reaches the orange box, the tooltip is always there, even if the mouse seems to be beyond the range of the tooltip, move the mouse to the position of the blue box, and the tooltip disappears. Is this normal?

[Konstantin Dikov]

Hi Hu,

The behavior that you are describing is made that way by design and I have to say that currently the tooltip will be removed after leaving the plot area. As for changing the position of the tooltip, you can use a PopupPropsContext (placing it around the Chart) to provide custom settings for the position of the popup used by the Tooltip. Here is an example demonstrating how you can display the Chart tooltip at fix vertical position:

•  https://stackblitz.com/edit/react-utwwad?file=app%2Fmain.jsx

Please let me know if this solution works for your scenario.

[Hu]

Hi Konstantin,

Thank you for your reply. Why does our customized position not work after adding crosshair? The tooltip will occasionally appear at our customized location, most of which are near the crosshair. This will still affect my ability to click on closer points.

Y65b36 (forked) - StackBlitz

[Konstantin Dikov]

With crosshair there will be 3 tooltips and the customization of the Popup will be applied to all of them, so you need to target only the last tooltip:

  const onRepositionTooltip = (props) => {
    let offset = wrapper.current.getBoundingClientRect().top;
    const tooltips = document.querySelectorAll('.custom-tooltip');
    if (tooltips.length > 2) {
      tooltips[2].style.top = offset + 'px';
    }
  };

• https://stackblitz.com/edit/react-i2djxs-57mmvi?file=app%2Fmain.jsx

Additionally, if you are going to have multiple Chart components, you will have to use different wrapper "ref" and event handlers, so that you can position the tooltip correctly using the specific wrapper.