XYchart show/hide tooltip if y point exists

[MahemaS27]

Hello! I'm implementing an XYchart that has an component. I've seperated out the Tooltip component to allow for more customization. What I would like to do is only display the tooltip if a y exists for the data point. Is there a way to do this inside this tooltip component?

import { defaultStyles } from '@visx/tooltip'
import { Tooltip } from '@visx/xychart'
import { FrameType } from './helpers'

type TooltipData = { x: string; y: number; frameType: FrameType }

// check if there even is a data point and then only display the tooltip!

const toolTipStyle = (tooltipData: TooltipData) => {
  tooltipData.y !== undefined ? 'flex' : 'none'
}

export const GraphTooltip = () => {
  return (
    <Tooltip<TooltipData>
      showVerticalCrosshair
      style={{
        ...defaultStyles,
        minWidth: 200,
        border: 'none',
        background: '#0b212d',
        opacity: 1,
        color: '#ffffff',
        display: `${toolTipStyle(tooltipData)}`,
        flexDirection: 'column',
      }}
      renderTooltip={({ tooltipData }) => (
        <div>
          Tooltip Header
          <br />
          <br />
          {tooltipData!.nearestDatum!.datum.x}
          <br />
          {`Thickness ${tooltipData!.nearestDatum!.datum.y}"`}
          <br />
          {`Type ${tooltipData!.nearestDatum!.datum.frameType}`}
        </div>
      )}
    />
  )
}

[williaster]

Hi @MahemaS27 thanks for checking out visx.

If you return null/a falsy value from the renderTooltip function, the Tooltip will not render. So you should just be able to base this logic on the y value and it should just work!

[MahemaS27]

That worked! I was able to base the logic off of the y value like you said:

renderTooltip={({ tooltipData }) => {
        if (tooltipData!.nearestDatum?.datum.y) {
          return (
            <div>
              Shell Wall
              <br />
              <br />
              {tooltipData!.nearestDatum!.datum.x}
              <br />
              {`Thickness ${tooltipData!.nearestDatum!.datum.y}"`}
              <br />
              {`Type ${tooltipData!.nearestDatum!.datum.frameType}`}
            </div>
          )
        } else {
          return null
        }
      }}