Search code examples
javascripttypescriptreferencerecharts

Hover effect or tooltip on recharts reference line


Looking to add a custom tooltip that displays on hover of a reference line. But it looks like there is no built in capability for this :(. Has anyone found a hacky solution for this?

Tried adding a onMouseHover on reference line, grabbing the coords/position in the custom tooltip element and using the onMouseHover on the actual linechart. None of these seemed to work :(.


Solution

  • So if I got your question right, I might have had the same issue. The line that is displayed when the tooltip is shown is done with the cursor prop.

    Please refer to this example codesandbox