XYChart how to position tooltip at bottom.

[MarkLyck]

How can I position my tooltip so it shows up in the X axis using XYChart?

In the screenshot below, I managed to make it always appear at the top using top={0}, but I would like to move the tooltip outlined in green to where the red box is, and follow the cursor still of course.

currently this is rendered using this:

<Tooltip<DataPoint>
        // @ts-expect-error - ?
        top={0}
        renderTooltip={({ tooltipData }) => {
          if (!tooltipData) return null
          const date = tooltipData.datumByKey[series[0].dataKey].datum[xField]
          return <span>{dayjs(date).format('HH:mm DD/MM/YYYY')}</span>
        }}
      />

I've of course tried bottom={0} but that does not work.

I've also tried style={{position: 'absolute', bottom: 0}} but that also doesn't seem to work, likely because it's rendered in a portal, so it's entirely off screen.

Any ideas how I can move this to overlay over the X axis instead of the top?

[williaster]

Hi @MarkLyck, I think the easiest way to do this is to tap into the powerful DataContext that is exposed in xychart! Using this context, you can access the height, margin, theme, and even the computed d3 x/yScales used by the chart.

For your purpose, here is an example where I just wrapped the Tooltip in a component which uses context to set top={height - margin.top} and it works as I think you want:

https://codesandbox.io/s/tooltip-bottom-4blhfs

In case it's useful to you or others as a completely different approach, there was a non-xychart question about using axes to trigger a tooltip here.

[MarkLyck]

Hi @williaster Thanks so much for this reply! I tried this solution and it "almost" works, but it seems to have a small visual bug where the tooltip will appear in the middle of the chart first and then "teleport" to the desired location.

See video: (it's very quick only like 1 frame when moving the mouse around) but feels buggy to the user.

The_Winchesters_S1E1_720p.mp4

Any idea how to solve this? It gets much worse if I try to add an animation to it and it constantly tries to animate from the central position in the chart to the bottom, rather than smoothly moving from 1 bottom position to another as I was hoping it would.