Chart card
A graph of one or more series: a line, columns, or a stream of parts around a centre line. Scrub across it to read a point.
Variations
Section titled “Variations”4 samples, each at every size that draws differently, then in chat, in the light theme, and as a ring where it has a headline.
chart · paused
Section titled “chart · paused”
Small draws the same as medium. Wide draws the same as medium, so they aren't shown. Only the empty space changes.
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
chart · scrub
Section titled “chart · scrub”
Small draws the same as medium. Wide draws the same as medium. Tall draws the same as medium, so they aren't shown. Only the empty space changes.
chart · stream
Section titled “chart · stream”
Small draws the same as medium. Wide draws the same as medium, so they aren't shown. Only the empty space changes.
Fields
Section titled “Fields”Every card also takes the fields all cards share.
| Field | Type | What it does |
|---|---|---|
type | 'chart' | |
unit? | string | |
max? | number | |
series | { name: string; points: number[]; tone?: Tone; total?: number }[] | total: the service’s own figure, when summing the points would disagree with the headline |
headline? | string | the big number, when the latest point isn’t it (“31 plays”) |
span? | string | e.g. “last 10 min” |
window? | string | what the columns cover, under them: “last 24 h” |
from? | number | when the first point is (ms), so scrubbing can say when |
to? | number | when the last point is |
labels? | string[] | or a name per point, for charts that aren’t over time |
style? | 'line' | 'bars' | 'stream' | bars: a column per point, the series stacked in order · stream: the same parts flowing around a centre line |
facts? | { label: string; value?: string }[] | quiet chips under the chart: what the number is made of |
factsNote? | string | what those chips are: “Most blocked · last 24 h” |