Chart
Shows numbers over time or by bucket.
Type
Calls
Calls Day Calls Oct 1 412 Oct 2 438 Oct 3 401 Oct 4 466 Oct 5 520 Oct 6 498 Oct 7 471 Oct 8 530 Oct 9 562 Oct 10 548 Oct 11 601 Oct 12 587 Oct 13 640 Oct 14 655 linedefault
Runs by hour
Runs by hour Hour Passed Failed 09:00 42 2 10:00 51 1 11:00 48 0 12:00 60 4 13:00 72 9 14:00 66 3 15:00 58 1 16:00 70 2 17:00 64 6 18:00 55 1 19:00 49 0 20:00 40 2 bar
Runs per day: up from 12 to 41, low 12, high 41 Point Runs per day Point 1 12 Point 2 18 Point 3 15 Point 4 22 Point 5 19 Point 6 26 Point 7 24 Point 8 31 Point 9 28 Point 10 35 Point 11 33 Point 12 41 sparkline
Runs, last 30 days Bucket Runs Status Sep 1 8 Passed Sep 2 15 Passed Sep 3 11 Passed Sep 4 18 Passed Sep 5 14 Warning Sep 6 10 Passed Sep 7 0 None Sep 8 0 None Sep 9 9 Passed Sep 10 16 Passed Sep 11 12 Passed Sep 12 8 Passed Sep 13 15 Failed Sep 14 11 Passed Sep 15 18 Passed Sep 16 14 Passed Sep 17 10 Passed Sep 18 17 Passed Sep 19 13 Passed Sep 20 9 Passed Sep 21 16 Passed Sep 22 12 Warning Sep 23 8 Passed Sep 24 15 Passed Sep 25 11 Passed Sep 26 18 Passed Sep 27 14 Passed Sep 28 10 Passed Sep 29 17 Passed Sep 30 13 Passed status
Series
Calls
Calls Day Calls Oct 1 412 Oct 2 438 Oct 3 401 Oct 4 466 Oct 5 520 Oct 6 498 Oct 7 471 Oct 8 530 Oct 9 562 Oct 10 548 Oct 11 601 Oct 12 587 Oct 13 640 Oct 14 655 onedefault
Reply time
Reply time Day p50 p95 Oct 1 0.8s 2.1s Oct 2 0.8s 2.2s Oct 3 0.8s 2.0s Oct 4 0.8s 2.4s Oct 5 0.8s 2.6s Oct 6 0.8s 2.3s Oct 7 0.8s 2.2s Oct 8 0.8s 2.5s Oct 9 0.8s 2.9s Oct 10 0.8s 2.6s Oct 11 0.7s 2.3s Oct 12 0.8s 2.5s Oct 13 0.7s 2.2s Oct 14 0.7s 2.1s two
Runs by model
Runs by model Day glaze-large glaze-small glaze-mini Oct 1 320 180 90 Oct 2 340 160 110 Oct 3 310 200 100 Oct 4 360 190 120 Oct 5 390 170 140 Oct 6 370 210 130 Oct 7 350 230 150 Oct 8 400 220 160 three
Runs by outcome
Runs by outcome Hour Passed Failed 09:00 42 2 10:00 51 1 11:00 48 0 12:00 60 4 13:00 72 9 14:00 66 3 15:00 58 1 16:00 70 2 17:00 64 6 18:00 55 1 19:00 49 0 20:00 40 2 status
Frame
Runs by outcome
Last 12 hours
Runs by outcome Hour Passed Failed 09:00 42 2 10:00 51 1 11:00 48 0 12:00 60 4 13:00 72 9 14:00 66 3 15:00 58 1 16:00 70 2 17:00 64 6 18:00 55 1 19:00 49 0 20:00 40 2 carddefault
Runs by outcome
Runs by outcome Hour Passed Failed 09:00 42 2 10:00 51 1 11:00 48 0 12:00 60 4 13:00 72 9 14:00 66 3 15:00 58 1 16:00 70 2 17:00 64 6 18:00 55 1 19:00 49 0 20:00 40 2 plain
Runs per day: up from 12 to 41, low 12, high 41 Point Runs per day Point 1 12 Point 2 18 Point 3 15 Point 4 22 Point 5 19 Point 6 26 Point 7 24 Point 8 31 Point 9 28 Point 10 35 Point 11 33 Point 12 41 none
States
Reply time
Loading Reply timeloading
Reply time
Reply time Day p50 p95 No runs yet empty
Reply time
Query timed outerror
Usage
When to use it
- Use
- A number over time a person reads for its shape: calls per day, latency per hour.
- Use
- Counts per bucket, with failures stacked on top: runs by hour by outcome.
- Use
- A trend beside a number (sparkline), or the health of the last 30 days at a glance (status).
- Not for
- One number and its change; write the label and the number in the type roles.
- Not for
- Exact values a person compares or copies. Use Table.
- Not for
- How far one task got. Use Progress.
- Not for
- When each step of one run started and how long it took. Use Timeline.
Rules
8 rules
- Never
- Give a series a colour to tell it apart; leave it ink, and let the second take ink at 60% and the third dashed on their own. Because colour means status in Glaze, so a blue or purple series reads as a state, and a fourth hue is a legend lookup on every glance.
- Must
- Set status: 'fail', 'warn' or 'ok' only on a series that is that outcome, and stack it on the plain ink series. Because the failure bar then pops in coral against ink, and a green Passed series next to it would take the eye off the failures.
- Must
- Give every Chart a label that says what and over when: "Runs, last 30 days". Because it names the frame, the point group a keyboard tabs into and the data table a screen reader reads.
- Must
- Pass unit="duration" (ms) or unit="count" with raw numbers instead of formatting values yourself. Because the axis, tooltip and table then share one unit from the largest value, so 950ms and 1.2s never sit on one axis.
- Must
- Pass loading, error with onRetry, and empty to the Chart; never swap it for a spinner or a paragraph. Because the chart holds its height and shows its own shape while it loads, so the page does not jump when the data lands.
- Never
- Put a frame="card" Chart inside a Card; use frame="plain" there, or let the chart be the card. Because a card around a card is two edges where one closes the group.
- Should
- Start a count's axis at zero (the default) and pass zero={false} only for values far from zero, like latency percentiles. Because a bar or a count line cut above zero makes a 5% change look like a doubling.
- Should
- Leave the legend on for more than one series and off for one; the title already names a single series. Because the legend is the only key to which ink step is which, and a one-entry legend repeats the title.
State order
4 states, highest first
- 1
- loading
- 2
- error
- 3
- empty
- 4
- ready
Accessibility
5 checks
- Each x value is a button named with its values ("Oct 4: Calls 466"), one tab stop for the group, arrow keys between them.
- Every chart carries its data as a table for a screen reader, an empty one too; table adds a visible copy behind a switch.
- Ink lines and bars are 11.9:1 and 5.5:1 on paper; a third series repeats a step dashed rather than dropping under 3:1.
- Colour is never the only sign: a status series is named in the legend and tooltip, a status bucket in its cell's name.
- The legend's buttons are toggles with aria-pressed; loading sets aria-busy and an error is a status region.
Keyboard
4 keys
- Tab
- Enters the chart at its last point, then the legend.
- Arrow keys
- Move between points and show each in the tooltip; Shift moves seven.
- Home / End
- Go to the first or last point.
- Escape
- Hides the tooltip.
Edge cases
7 edge cases
- Missing value
- A gap in the line, no bar, and None in the tooltip and table.
- One point
- A small square at the plot's centre.
- Many x labels
- They thin out to every nth so none overlaps; the last always shows.
- Narrow card
- The plot shrinks to fit and the labels thin; the height stays.
- Right to left
- x runs from the right, the y axis sits on the right and the arrow keys follow the screen.
- Dark theme
- Ink flips to near-white, the second step with it; status colours take their dark values.
- Forced colors
- Lines and bars draw in CanvasText; dashes and hollow bars keep series apart.
API
14 props
type'line' | 'bar' | 'sparkline' | 'status'labelstringdataChartRow[] | (number | null)[] | StatusBarBucket[]xKey, configstring, ChartConfigframe'card' | 'plain' | 'none'default'card'title, description, actionsReactNodeunit'duration' | 'count'heightnumberdefault200loading, error, onRetry, retrying, emptyboolean, ReactNode, () => void, boolean, ReactNodelegend, table, defaultHiddenboolean, boolean, string[]curve, area, zero'monotone' | 'linear' | 'step', boolean, booleandefault'monotone', false, truestackedbooleandefaultfalsestatus, variant, end, interactiveChartStatus, 'line' | 'bar', boolean, booleandefault, 'line', true, falsenoun, range, onBucketClick[string, string], [ReactNode, ReactNode] | false, (bucket, i) => void
Tokens
21 tokens
--ink- #050505
--ink-60- rgb(5 5 5 / 0.60)
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--text-inverse- #ffffff
--ok- #2c9a59
--warn- #d98a0b
--fail- #e35e49
--line-faint- rgb(5 5 5 / 0.06)
--line- rgb(5 5 5 / 0.10)
--line-strong- rgb(5 5 5 / 0.45)
--hover- rgb(5 5 5 / 0.06)
--field- #efefef
--paper- #ffffff
--shell- #f1f1f0
--type-caption- 400 12px/1.35 var(--font-sans)
--type-label-sm- 500 12px/1.35 var(--font-sans)
--radius-tag- 6px
--control-sm- 26px
--stale- 0.6
--z-overlay- 50