Chart gallery

Every chart type and palette role in one place. Toggle the site theme to check both surfaces. Rules are in chart-style.md.

surface #ffffff · light · contrast shown per swatch, red under 3:1

Ordered roles

One hue stepped by lightness, for values that have an order. Darker green means further down the tail on white; lighter means the same on the dark card. Never give an ordered family separate hues.

statP50#00b0662.84:1
statP25#0078445.57:1
statP10#00482610.74:1

Identity roles

Fixed slots assigned in order, never cycled: the order is what keeps them apart under deutan and protan vision. seriesAlt[i] is the second member of family i, for series that come in pairs.

series[0]#0478575.48:1
series[1]#0f74c54.86:1
series[2]#c384063.17:1
series[3]#cd42904.40:1
seriesAlt[0]#02483810.57:1
seriesAlt[1]#0844909.38:1
seriesAlt[2]#8c5a0e5.86:1
seriesAlt[3]#78405a7.84:1

Reserved and muted

bad / neutral / good are polarity and never stand for identity. The greys are for a statistic that is a reference rather than a finding, and for any statistic pinned where it cannot move.

bad#cf23185.38:1
neutral#8fb19f2.34:1
good#0478575.48:1
statMean / statMuted#78807b4.06:1
mutedAlt#5357537.35:1

BarChart · vertical, grouped, identity roles

Four series through the four identity slots.

BarChart · three families of two

What to do instead of reaching for a fifth and sixth hue. Each family is one hue with seriesAlt as its second step.

BarChart · horizontal, ordered roles

The shape the relevance-tail post uses: a grey mean over an ordered green ramp.

BarChart · markers and pills

Labels ride a pill in the marker's colour, so the text contrasts with the pill rather than the card. side puts a pill left or right of its line and flips only when that side has no room; row stacks labels that would collide; solid drops the dash.

BarChart · grouped-stacked

Series sharing a group key stack; distinct groups sit side by side.

BarChart · diverging

Negative values render below a zero baseline. Polarity roles carry the sign.

BarChart · view toggle

Segmented buttons switch datasets, the way the metric toggle works in a post.

LineChart · all eight identity slots

Defaults come from the palette now, so a series with no colour gets the next validated slot. Markers differ per series as a second channel beyond hue.

LineChart · confidence band and a dashed fit

A ribbon in the series colour for a spread, and a dashed markerless series for a fit or reference.