Tooltips

Tooltips in REAVIZ provide additional information about data points when users hover over them.

Types supported by reaviz:

TooltipArea - Used for positioning tooltips based on position calculations of data. Ideal for multi-series charts (bar/line/area), time series data, and charts with difficult-to-hit points (small bar chart lines).
Tooltip - Used for simple positioning relative to an element. Ideal for most charts.

Where to use:

TooltipArea:

Multi-series charts (bar/line/area)
Time series data (line/area)
Small bar chart lines with difficult-to-hit points

Tooltip:

Simple positioning relative to an element
Ideal for most chart types

Tooltip Area Example

The Sonar Chart is a good example of a custom tooltip area:

<StackedBarSeries
  type="stackedDiverging"
  tooltip={
    <TooltipArea
      tooltip={
        <ChartTooltip
          followCursor={true}
          modifiers={{
            offset: '5px, 5px'
          }}
          content={(data, color) => (
            <TooltipTemplate
              color={color}
              value={{
                x: formatValue(data.x),
                y: `${formatValue(Math.abs(data.data[0].y))}`
              }}
            />
          )}
        />
      }
    />
  }
/>

In the example above, the component recieves a custom TooltipArea where it overrides the tooltip property passing its own content.

API

TooltipArea (opens in a new tab)

Prop	Description	Default
`placement`	Popperjs placement. `Placement`
`height`	Chart height. Set internally. `number`
`width`	Chart width. Set internally. `number`
`xScale`	Chart D3 XScale. Set internally. `any`
`yScale`	Chart D3 YScale. Set internally. `any`
`disabled`	Whether the tooltip is disabled or not. `boolean`
`color`	Color setter. `any`
`data`	Chart internal data type. `ChartInternalDataShape[]`
`children`	Child elements to be contained by. `any`
`isRadial`	Whether the area is radial or not. `boolean`	`false`
`isContinous`	Whether the area is continous or not (e.g. line and area charts are continous, bar charts are not). `boolean`	`true`
`innerRadius`	Inner-radius to set the positioning by. Set internally. `number`
`outerRadius`	Outer-radius to set the positioning by. Set internally. `number`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`inverse`	Whether to inverse the data or not. `boolean`	`true`
`onValueEnter`	When pointer entered mouse area. `(event: TooltipAreaEvent) => void`	`() => undefined`
`onValueLeave`	When pointer left mouse area. `() => void`	`() => undefined`
`isHorizontal`	Whether the layout is horizontal or not. `boolean`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`2 * Math.PI`
`ref`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} `LegacyRef<any>`
`key`	`Key`

ChartTooltip Example

The Calendar Heatmap is a good example of chart tooltip:

<HeatmapCell
  tooltip={
    <ChartTooltip
      content={d =>
        `${formatValue(d.data.metadata.date)} ∙ ${formatValue(
          d.data.value
        )}`
      }
    />
  }
/>

In this example above, the component overrides the tooltip to format the date for a Calendar format.

API

ChartTooltip (opens in a new tab)

Prop	Description	Default
`content`	Content for the tooltip. `any`	`<TooltipTemplate />`
`value`	Tooltip data value. `any`
`color`	Color scheme to apply. `any`
`data`	Complete dataset. `any`
`followCursor`	Whether the tooltip should move with the cursor or not. `boolean`
`children`	Content to wrap. `ReactNode`
`closeOnClick`	Close on any click. `boolean`
`closeOnBodyClick`	Close when the body is clicked. `boolean`
`closeOnEscape`	Close when escape key is triggered. `boolean`
`reference`	Reference of the tooltip to align to. `any`
`placement`	floating-ui placement. `Placement`
`enterDelay`	Delay before showing tooltip. `number`
`leaveDelay`	Delay before closing tooltip. `number`
`modifiers`	floating-ui modifiers. `Modifiers`
`visible`	External setter for visibility. `boolean`
`className`	Additional CSS classnames. `string`
`triggerClassName`	CSS Classname for the tooltip container ( ie. the thing that the tooltip is bound to ). `string`
`trigger`	How the tooltip will be triggered. `TriggerTypes \| TriggerTypes[]`
`disabled`	Whether the tooltip is disabled. `boolean`
`pointerEvents`	Add pointer events or not. Usually not for tooltips. `string`
`isPopover`	Differentiator for popovers to be handled separate from tooltips `boolean`
`onOpen`	Tooltip was opened. `() => void`
`onClose`	Tooltip was closed. `() => void`
`theme`	Theme for the tooltip. `TooltipTheme`

Custom Tooltips

You can also override tooltips and handle them yourself manually. Below is an example of overriding the onMouseEnter and onMouseLeave in the VennDiagram component to handle displaying what would be in the tooltip in a custom panel below the chart.

const Venn = () => {
  const [active, setActive] = useState<any | null>(null);
 
  return (
    <>
      <VennDiagram
        type="starEuler"
        data={data}
        height={275}
        series={
          <VennSeries
            arc={
              <VennArc
                onMouseEnter={({ value }) => {
                  setActive(`${value.sets.join(' & ')} - ${value.size.toLocaleString()}`);
                }}
                onMouseLeave={() => setActive(null)}
              />
            }
          />
        }
      />
      {active !== null && (
        <p>{active}</p>
      )}
    </>
  );
};

Mark Line Axis