The chart tooltip standard

One shared tooltip component and a written rule that every chart hover must add the numbers the chart could not plot — never repeat the bar's own label and value.

What it is

A component plus a documented contract used by every chart in the app. Three ordered tiers: the title carries the full, untruncated identity of the series; Stat rows carry the figures the chart could not show — sample size, the baseline the bar is measured against, the spread, the counts behind a percentage; and the footnote carries the one sentence a manager would act on. A left border in the series colour keeps the eye anchored.

Also called: hover tooltips · chart hover · informative tooltips · what does this bar mean

See it
The chart tooltip standard
Won
51%
Avg cycle
21d
Pipeline
$512k
JanSep
A hovered bar with the tooltip open: bold crew name, subtitle 'Framing', three Stat rows, and a hairline footnote 'Worst: Miller barn, 6d over — waiting on trusses'. ChartTooltip.tsx. Sample data — no customer information appears here.
How it works
  1. 1ChartTooltip takes title, subtitle, accent colour, Stat children and a footnote.
  2. 2Stat renders a label/value row with an optional colour dot and an optional good/bad tone that colours the value only.
  3. 3The published checklist gates every new tooltip: does it repeat the axis label with nothing added; does it show the plotted value and nothing else; is there a sentence a manager could act on; is it under about six rows; do percentages carry their raw counts.
  4. 4Every recharts tooltip in the app renders one of these.
Why we built it

2026-quoted verbatim in both the component and the standard doc: 'there should be mouse-hover tooltips that are informative and NOT REDUNDANT with the data that's being presented in the graph. Progressive disclosure and information architecture principles should be deployed.' The component adds the reasoning: 'A tooltip that reads back the bar's own label and value has spent the user's attention to tell them what their eyes already read, and it trains them to stop hovering.' It was also a consolidation — 'Three had grown independently (leaderboard, analytics, team) and had drifted on radius, shadow, padding and text size — the drift is invisible until two charts sit on one screen, which is exactly what the Team performance tabs do.'

The problem
  • Redundant tooltips trained users to stop hovering.
  • Three independently grown tooltip styles drifted visibly when charts shared a screen.
  • Sample size and baseline were never shown, so averages could not be judged.
Sound familiar?
What you get
Hovering a chart always teaches something the chart could not plot.
Every chart in the product reads as one system.
Percentages are never shown without their raw counts.
What's inside

See it on your own jobs

Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.

or keep browsing features →