Deep chart explainers

An (i) beside a chart opens either a one-line popover or a full modal with what it is, how to read it, and a worked example with real numbers.

What it is

Two levels of explanation. InfoTip is the quick one-liner on a section heading or a table column. InfoModal is the zero-ambiguity version: a title, a 'what it is' section, a 'how to read it' section and a visually distinct worked example in an accent-wash callout. The activity heatmap uses the modal; most charts use the tip.

Also called: what does this chart mean · info icon · help on a chart · worked example

See it
Deep chart explainers
Won
31%
Avg cycle
22d
Pipeline
$557k
JanSep
The heatmap's (i) opening a modal titled 'Activity by Hour & Day' with What / How sections and a teal example callout. InfoModal.tsx. Sample data — no customer information appears here.
How it works
  1. 1Copy lives in a FieldHelp record so the same explanation appears identically everywhere the field appears.
  2. 2The modal portals to the page body so a parent's overflow can never clip it, and closes on the X, the backdrop or Escape.
  3. 3Panel hints on the Team charts carry the reading instruction on the panel itself rather than repeating it in every tooltip.
Why we built it

The component explains the division of labour: 'Where InfoTip is a quick one-liner popover, InfoModal is the "I want zero ambiguity" version.' The heatmap's help copy shows the standard — a full worked example ending in a decision the reader can act on. The Team panels record the complementary rule: 'the reading instruction belongs on the panel, not repeated in every tooltip.'

The problem
  • Charts assumed a level of reporting literacy builders were never asked for.
  • Explanations drifted between screens when written inline.
Sound familiar?
What you get
An owner with no reporting background can read every chart in the product.
Explanations are written once and appear identically everywhere.

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 →