Legend, then selective labels
Show a legend for two or more series, and label only the end or extreme.
From dataviz (references/marks-and-anatomy.md, references/anti-patterns.md).
Which numbers earn a label
Drag Series from 1 to 6.
Every pointBad
Revenue by region
Jan–Aug, $
Selective
Good
Revenue by region
Jan–Aug, $legend.hidden = series.length < 2;
labels = series.length <= 4 ? series.map(endOf) : [endOf(focus)];
if (mode === "extreme") labels.push(peakOf(series));
When end labels collide
Push Convergence up, then try Small multiples.
Stacked, nudgedBad
Active accounts by plan
Jan–Aug
Wired or faceted
Good
Active accounts by plan
Jan–Augfor (const p of spreadApart(ends, 14)) leader(p.ideal, p.y), label(p);
if (series.length > 4 && converging) layout = "small-multiples";
Move a label, never crop it
Shrink Add-ons or Services, or pick a longer label.
ClippedBad
overflow: hidden; text-overflow: clipMeasuredGood
if (w + 16 <= seg.width) return "inside";
if (isLast && seg.right + 6 + w <= room) return "end";
return "tooltip";
Why it matters, pros and cons
Why it matters
The legend always carries identity, so color never has to. Labels get read because they are rare.
Pros
- The headline number sits on the mark
- Identity survives color blindness and print
- Tooltips carry everything unlabeled
Cons
- End labels need 70 to 100px of right margin
- Collision handling is real code
- Small multiples cost vertical space