How do I implement click to pin tooltip (frozen tooltip) with xycharts?

[theBstar]

I need to implement a tooltip that is pinned to a specific data point when clicked. This is done to have a tooltip with interactive content inside for digging deeper into data. I am attaching a Loom to make this visual -https://www.loom.com/share/525ce376ab624ce78dd55d70b10ca1f6

I have a working implementation, but I am curious to hear if there is a better way to do this.
Also sharing an image below showing my current implementation - architecture and provider

[MILLERMARRU]

@visx/xychart's built-in <Tooltip> is driven entirely by hover/pointer state through TooltipContext, so there's no "lock" flag on it, trying to freeze that same instance fights the library rather than working with it. The pattern that fits your use case is to keep the built-in <Tooltip> for hover as-is, and drive a second, independent tooltip for the pinned state using @visx/tooltip's own useTooltip directly, populated from the onPointerUp handler that Series components expose:

const {
  tooltipOpen: pinOpen,
  tooltipData: pinData,
  tooltipLeft: pinLeft,
  tooltipTop: pinTop,
  showTooltip: showPin,
  hideTooltip: hidePin,
} = useTooltip<{ datum: MyDatum }>()

<LineSeries
  dataKey="Line 1"
  data={data}
  xAccessor={xAccessor}
  yAccessor={yAccessor}
  onPointerUp={({ datum, svgPoint }) => {
    showPin({ tooltipData: { datum }, tooltipLeft: svgPoint.x, tooltipTop: svgPoint.y })
  }}
/>

{pinOpen && (
  <TooltipWithBounds left={pinLeft} top={pinTop} style={{ ...defaultStyles, pointerEvents: 'auto' }}>
    <YourInteractiveContent datum={pinData!.datum} onClose={hidePin} />
  </TooltipWithBounds>
)}

Because this second tooltip has its own state, it doesn't get overwritten by the hover tooltip's continuous updates, and since it's a normal TooltipWithBounds (not the context-driven <Tooltip>), you can set pointerEvents: 'auto' on it so users can actually click/scroll inside the pinned content, which the auto-hiding hover tooltip usually can't allow.