Chart system

Line (with a confidence band). Use for one story over time. The focus series is cobalt, with a light band when sampling noise matters; every other series is a muted grey, labelled at the end of the line. Annotate inflection points with a thin leader. Never a rainbow legend.

Slope chart. Use to show how a value (or a rank) changed between exactly two periods, for several brands or engines at once. Labels live on both ends; cobalt marks “you.” Prefer this over a two-point line chart.

Dumbbell. Use to compare you vs. a named competitor (or this scan vs. an earlier one) across a short list of engines or topics. Two dots, one connector, values at both ends. Cobalt is you.

Waterfall. Use to explain a change in a single number — visibility score, spend, mention rate — as a sequence of signed drivers. Start and end are ink; gains are cobalt; losses are the muted warning colour. Values sit on the bars.

Small multiples. Use when several series share a unit and a y-axis, and a single multi-line chart would fight itself (four engines is the classic case). One mini trend per panel, last value in the title, shared scale so panels are comparable.

Ranked horizontal bars. Use for share of voice, citations, or any ranking. Sort descending. Highlight “you” in cobalt and mute the rest. Put the value at the end of the bar, never in a legend.

100% stacked bars. Use for a composition that adds to a whole (sentiment, share of a domain’s citations by engine). Label segments on the bar when there is room. Prefer this to a pie; a pie is only acceptable for two or three slices, and we don’t use one here.

Marimekko (mosaic). Use when two dimensions of share matter at once — here, engine volume (column width) and brand share (segment height). Direct-label large cells; let the tooltip carry the small ones.

Heatmap matrix. Use for a topic × engine (or prompt × engine) rate. A sequential cobalt scale, colour-blind safe, with the number written in every cell. Never a rainbow.

Bump chart. Use for rank over time, when the story is overtaking rather than the raw value. #1 at the top. End-of-line labels; cobalt for the focus brand.

2×2 quadrant / bubble scatter. Use for an opportunity map (impact vs. effort) on Recommendations. Quadrants are Quick wins, Strategic, Fill-ins, Reconsider. Direct-label every bubble; size encodes a third measure (estimated lift).

Bullet chart. Use to show a score against a target, with qualitative range bands behind it (low / mid / high). The bar is the actual, the ink tick is the target. Quieter and more precise than a gauge.

Sparkline. Use in KPI tiles and tight table cells for a quick trend. Mark the min, the max and the last point. No axes, no title — the tile already has those.

Rules that apply to every chart

• Every chart has a one-sentence action title (the takeaway), a smaller subtitle for the metric, unit and period, and a source / footnote line.
• Direct labelling instead of a legend wherever it fits: end-of-line labels with the value, bar values on or at the end of the bar.
• Highlight one story: the focus series in cobalt #2b36d9; everything else a 4-step grey ramp. One muted warning/negative colour. Colour-blind safe — never rely on red vs. green alone.
• Minimal ink: no chart border, no heavy axes, light horizontal gridlines only, a zero baseline in ink, tabular Plex Mono figures, a sensible tick count. No 3D. No pies beyond two or three slices (and we prefer bars).
• Interaction: a hover crosshair, a tooltip that stays inside the plot (and never covers the KPIs above), keyboard focus with arrow keys, and a “View as table,” “CSV” and “PNG” control on every chart.
• Motion: a short draw-in, skipped entirely when prefers-reduced-motion is set.
• Text wraps. Labels, titles and tooltips never overlap, clip or truncate in a way that loses meaning.