Stem chart
Prints one value per period on a square-headed stem.
Tone
Jobs run, Jul to Dec Period Jobs run Jul 412 Aug 288 Sep 351 Oct 140 Nov 236 Dec 205 accentdefault
Jobs run, Jul to Dec Period Jobs run Jul 412 Aug 288 Sep 351 Oct 140 Nov 236 Dec 205 ink
Periods
Jobs run, Jul to Dec Period Jobs run Jul 412 Aug 288 Sep 351 Oct 140 Nov 236 Dec 205 6default
Jobs run this year Period Jobs run Jan 318 Feb 296 Mar 352 Apr 401 May 377 Jun 344 Jul 412 Aug 288 Sep 351 Oct 140 Nov 236 Dec 205 12
States
Jobs run, Jul to Dec Period Value Jul 412 Aug 288 Sep 351 Oct None Nov 236 Dec 205 missing value
Jobs run, Jul to Dec Period Value No jobs ran in this range. empty
Usage
When to use it
- Use
- A short run of periods a person reads value by value: jobs per month, loads per day this week.
- Use
- The one figure a panel is about, under its big number, where every value should be on the page.
- Not for
- More than about 14 periods, or several series. Use Chart.
- Not for
- One total split into named parts. Use Bar blocks.
Rules
6 rules
- Must
- Give the yellow heads (tone="accent", the default) to one stem chart in a view, the one the view is about; set tone="ink" on the rest. Because yellow marks the one thing that matters, so a row of yellow stem charts gives the eye nowhere to land.
- Must
- Keep it to 3 to 14 periods; past that use Chart. Because every value is printed on a quarter turn, and past 14 the printed values touch at phone width.
- Must
- Give every stem chart a label that says what and over when, and a valueLabel for the table. Because the label names the point group a keyboard tabs into and the table a screen reader reads, where Value means nothing.
- Must
- Name periods in three or four characters (Jul, Mon, 14:00); the label role sets the capitals. Because the period names turn a quarter, and a long name takes the plot's height from the stems.
- Never
- Colour single stems to call them out; the heads carry one tone for the whole chart. Because a red or green head reads as a status the data does not have, and the printed value already says which is high.
- Should
- Leave values exact (1,925) unless they pass five characters; then pass unit to compact them. Because the printed value is the point of the chart, so it rounds only when it would not fit its quarter turn.
Accessibility
4 checks
- Each stem is a button named with its period and value ("Oct: 140"), one tab stop for the group, arrow keys between them.
- The data is a table for a screen reader; the printed values and the drawing are hidden from it, so each is heard once.
- Accent heads are yellow edged in --accent-text, 6.2:1 on white; ink heads are 18.3:1. The stems are --data-3, 3.1:1.
- The printed values are text-2 (7.8:1) and the periods text-3 (5.6:1).
Keyboard
3 keys
- Tab
- Enters the chart at its last stem.
- Arrow keys
- Move between stems; Shift moves seven.
- Home / End
- Go to the first or last stem.
Edge cases
7 edge cases
- Missing value
- No head and no stem; the area breaks there and the printed value and table say None.
- Narrow width
- Stems close up; the quarter-turned labels keep fitting down to 14 periods at 390px.
- Long values
- The top room grows with the longest printed value, and the plot shortens to fit.
- Right to left
- Periods run from the right and the arrow keys follow the screen.
- Dark theme
- Accent heads stay sodium yellow, edged in yellow; stems take the dark khaki.
- Reduced motion
- Stems, heads and area are there at once.
- Forced colors
- Stems and heads draw in CanvasText and the area drops.
API
7 props
labelstringdata, xKey, valueKeyChartRow[], string, stringxLabel, valueLabelstringdefault'Period', 'Value'tone'accent' | 'ink'default'accent'areabooleandefaulttrueheightnumberdefault240valueFormat, unit(v: number) => string, 'duration' | 'count' | 'bytes'defaultexact
Tokens
14 tokens
--data-1- #ffd400
--data-3- #9a937c
--accent-text- #7a5d00
--text-1- #161512
--text-2- #55524a
--text-3- #6b675e
--well- #f4f3ee
--line- #e2dfd5
--line-faint- #efede6
--marker- 8px
--type-micro- 400 11px/14px var(--font-mono)
--type-code-sm- 400 12px/16px var(--font-mono)
--dur-wipe- 240ms
--dur-draw- 300ms