How to access neighbor datums?

[DigitalEntelechy]

Context: In a simple line chart & using <Tooltip/> I'd like to use renderGlyph to create a glyph scrubber component that is comprised of a circle at the hovered index and a circle for the nearest X number of series neighbors in both directions.

Building the component seems straightforward enough, but I cannot sort out how to access the x,y coordinates of the series neighbors to properly place them.

How can I approach this?

Thank you in advance.

[williaster]

Hey @BowTiedGar thanks for checking out visx. Just so I can help better, can you share which package(s) you are using to try and do this? E.g. @visx/tooltip + @visx/shape, or @visx/xychart?

[DigitalEntelechy]

Hi @williaster

Thank you for the response. I'm working with the <Tooltip/> component from @visx/xychart.

Edited to say...

Essentially, I want the renderGlyph to render a custom component with three shapes. One as the hovered index/point, one to the nearest right neighbor & one to the nearest left neighbor. I want this shape to move along the series as I hover move mouse.

renderGlyph is using RenderTooltipGlyphProps which extends RenderGlyphProps.

The props I'm seeing within renderGlyph look like this.

{
    "x": 0,
    "y": 0,
    "key": "Line 1",
    "color": "#0b7285",
    "datum": {
        "x": "2022-03-24",
        "y": 2481160
    },
    "index": 23,
    "size": 4,
    "isNearestDatum": true
}

I'm confused why x & y are coming through as 0. I guess because<Tooltip/> is controlling coordinates, but if that's the case how do I set positioning of shape elements within my custom glyph component?

[DigitalEntelechy]

Got it sorted. DataRegistry from DataContext is what I needed.