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 

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 

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>
      )}
    </>
  );
};