Chart
Ink bars on a hairline baseline, labels in the label voice.
States
-
Rest
nothing set
An ink bar on the baseline.
-
Hot
hover or :focus-visible
--state, a flare at its top, and its value above it.
-
Second series
sh-chart__bar--second
--tissue, a step back from the ink.
Anatomy
| Bars | --ink, sharing the width, half a module apart |
|---|---|
| Second series | --tissue |
| Baseline | a 1px --border hairline; no gridlines, no legend boxes |
| Axis | labels in the label voice, --muted-foreground, under each bar |
| Hot | the bar turns --state, fires a 280ms flare at its top and prints its value above it |
| Plot height | seven modules |
The flare’s length is read from rule.ts at build time.
Notes
-
Drawn
Ink bars on a hairline baseline, labels in the label voice under them. The value only prints while a bar is hot, so the chart rests as shapes.
-
Red on hover only
A hot bar and its value are --state because pointing at it is the state. A bar is never red at rest, so a series can’t be told apart by red.