How to make tooltip snap to smooth chart in AreaClosed?

[VityaSchel]

Hello! I love this library, but it really lacks examples and explanation. All I found is gallery and installation tips. Can someone help me combine gradient, smooth gradient and tooltip from AreaClosed chart and tooltip snap from XYChart?

In the video below, AreaClosed (first clip) has a bug where tooltip just moving with mouse along X axis.

coolchart.mp4

While in second clip in XYChart, tooltip and point are snapping to closest data point.

coolchart2.mp4

From what I found in the code, I think I should change the x variable that is returned from localPoint function:

// ...
const handleTooltip = useCallback(
  (event: React.TouchEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
    const { x } = localPoint(event) || { x: 0 }
    // this ^ variable is mouse position and tooltip position
    const x0 = dateScale.invert(x)
    const index = bisectDate(chartData, x0, 1)
    const d0 = chartData[index - 1]
    const d1 = chartData[index]
// ...

[VityaSchel]

well of course as always I had to figure it out myself...

I analysed each of variables in tooltip handler and slightly modified it.

// tooltip handler
const handleTooltip = useCallback(
  (event: React.TouchEvent<SVGRectElement> | React.MouseEvent<SVGRectElement>) => {
    const mouse = localPoint(event) || { x: 0 }
    const x0 = dateScale.invert(mouse.x)
    
    const closest = (target: number, list: number[]): number => {
      const closestMatch = list.reduce((prev, curr) => Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev)
      return closestMatch
    }
    
    const closestWithIndex = (target: number, list: number[]): number => {
      const closestMatch = closest(target, list)
      const closestMatchIndex = list.findIndex(p => p === closestMatch)
      return closestMatchIndex
    }

    const index = closestWithIndex(x0.getTime(), chartData.map(d => new Date(d.date).getTime()))
    const d = chartData[index]
    const closestPoint = mouseX => {
      const points: number[] = chartData.map((_: any, i: number) => i / (chartData.length - 1) * width)
      const closestMatch = closest(mouseX, points)
      return closestMatch
    }
    showTooltip({
      tooltipData: d,
      tooltipLeft: closestPoint(mouse.x),
      tooltipTop: valueScale(getValue(d)),
    })
  },
  [showTooltip, valueScale, dateScale],
)

Feel free to use it and modify yourself but don't you dare asking me anything about this, I have no idea how it works

[williaster]

Hi @VityaSchel , sorry we missed your question but happy you have a solution. I think you could simplify it slightly by removing closestPoint and simply setting showTooltip({ ..., tooltipLeft: dateScale(getDate(d)) }) (getDate would just be d => new Date(d.date).getTime()). closestPoint seems unnecessary because you already have found your closest point d.

Maybe I can still help by describing the general approach that is used to "snap" a tooltip to a data point:

0. from the event object, you have screen x/y and you need to find the closest data point to those screen coordinates
1. first it helps to scope coordinates to our chart svg since that's where our scale coordinates are. we find the svg x coordinate using the localPoint utility from @visx/event.
2. the svg x coordinate needs to be mapped to your dataset. To do this you have to use the x-scale. Typically a d3 scale takes as input the data value and maps it to svg coordinates, but here we need to do the opposite: go from svg coordinates to a data value. some scales (including time scales) have an .invert() method which makes this easy.
3. after "inverting" our svg coordinates with the x-scale, we now have a data value (a date in this case) but it may not actually map to a specific data point (scales interpolate values between points, and we may be between points). so we have to go through each of our data points to find the one that is closest. d3 has some array "bisector" methods that make this performant, but your approach is just fine and less black box :)
4. now we have the actual data point that is closes to our pointer coordinates! from here, you want to position the tooltip at those coordinates and to do that you actually have to go back to the x/y-scales. But this is just like scaling a value as you would to position a point in a scatterplot or line, you just call xScale(getXValue(datum)) (same for y-)

hope that helps!