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

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?

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.

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

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.