Chart
Shows numbers over time as a line or an area.
Type
Rows loaded, last 14 days
Rows loaded, last 14 days Day Rows loaded Oct 1 182K Oct 2 190K Oct 3 177K Oct 4 214K Oct 5 237K Oct 6 198K Oct 7 172K Oct 8 206K Oct 9 249K Oct 10 262K Oct 11 232K Oct 12 219K Oct 13 254K Oct 14 272K linedefault
Rows loaded, last 14 days
Rows loaded, last 14 days Day Rows loaded Oct 1 182K Oct 2 190K Oct 3 177K Oct 4 214K Oct 5 237K Oct 6 198K Oct 7 172K Oct 8 206K Oct 9 249K Oct 10 262K Oct 11 232K Oct 12 219K Oct 13 254K Oct 14 272K area
Series
Rows loaded
Rows loaded Day Rows loaded Oct 1 182K Oct 2 190K Oct 3 177K Oct 4 214K Oct 5 237K Oct 6 198K Oct 7 172K Oct 8 206K Oct 9 249K Oct 10 262K Oct 11 232K Oct 12 219K Oct 13 254K Oct 14 272K onedefault
Query time
Query time Day p95 p50 Oct 1 640ms 212ms Oct 2 702ms 224ms Oct 3 588ms 198ms Oct 4 815ms 241ms Oct 5 774ms 236ms Oct 6 690ms 219ms Oct 7 655ms 205ms Oct 8 742ms 228ms Oct 9 906ms 251ms Oct 10 948ms 263ms Oct 11 812ms 240ms Oct 12 768ms 232ms Oct 13 834ms 247ms Oct 14 801ms 239ms two
Queries by warehouse
Queries by warehouse Day Primary Replica Archive Oct 1 1.2K 0.8K 0.2K Oct 2 1.3K 0.9K 0.2K Oct 3 1.2K 0.8K 0.2K Oct 4 1.4K 0.9K 0.2K Oct 5 1.5K 1.0K 0.2K Oct 6 1.4K 0.9K 0.3K Oct 7 1.3K 0.8K 0.2K Oct 8 1.5K 0.9K 0.2K Oct 9 1.6K 1.0K 0.3K Oct 10 1.7K 1.1K 0.2K Oct 11 1.5K 1.0K 0.3K Oct 12 1.5K 0.9K 0.3K Oct 13 1.6K 1.0K 0.2K Oct 14 1.7K 1.1K 0.3K three
Jobs by hour
Jobs by hour Hour Finished Failed 08:00 42 2 09:00 58 3 10:00 61 1 11:00 55 9 12:00 49 12 13:00 63 4 14:00 70 2 15:00 66 1 16:00 59 3 17:00 52 2 status
Frame
Rows loaded
3.0M
Rows the nightly sync loaded in the last 14 days.
Rows loaded, last 14 days Day Rows loaded Oct 1 182K Oct 2 190K Oct 3 177K Oct 4 214K Oct 5 237K Oct 6 198K Oct 7 172K Oct 8 206K Oct 9 249K Oct 10 262K Oct 11 232K Oct 12 219K Oct 13 254K Oct 14 272K framedefault
Query time
Query time Day p95 p50 Oct 1 640ms 212ms Oct 2 702ms 224ms Oct 3 588ms 198ms Oct 4 815ms 241ms Oct 5 774ms 236ms Oct 6 690ms 219ms Oct 7 655ms 205ms Oct 8 742ms 228ms Oct 9 906ms 251ms Oct 10 948ms 263ms Oct 11 812ms 240ms Oct 12 768ms 232ms Oct 13 834ms 247ms Oct 14 801ms 239ms plain
States
Query time
Loading Query timeloading
Query time
Query time Day p95 p50 No queries in this range. empty
Query time
Query timed out.
error
Usage
When to use it
- Use
- A number over time a person reads for its shape: rows loaded per day, query time per hour.
- Use
- Two to four series of one unit on one axis: p50 and p95, primary and replica.
- Use
- A count with its failures, the failures as a status series.
- Not for
- A short run of periods read value by value, each printed. Use Stem chart.
- Not for
- One total split into named parts. Use Bar blocks.
- Not for
- The order of steps across systems. Use Swimlanes.
- Not for
- One number and its change; write the label and the number in the type roles.
Rules
9 rules
- Must
- Leave one series yellow, the one the chart is about: the first by default, accent="key" to move it, accent={false} for a chart with none. Because yellow marks the one thing that matters in Sodium, so two yellow series split the eye and a page of yellow charts says nothing.
- Never
- Give a series a colour to tell it apart; the rest are ink, then text-3, then both dashed, on their own. Because Sodium has one yellow and three status colours, so a blue series reads as a state and a fifth hue is a legend lookup on every glance.
- Must
- Set status: 'fail', 'warn' or 'ok' only on a series that is that outcome, and leave its partner plain. Because the failures then show red against ink, and a green Finished series beside them pulls the eye off the failures.
- Must
- Give every Chart a label that says what and over when: "Rows loaded, last 14 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), "count" or "bytes" with raw numbers instead of formatting values yourself. Because the axis, readout 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 its outline while it loads, so a page of charts does not jump when the data lands.
- Never
- Put a frame="frame" Chart inside another frame or panel; use frame="plain" there, or let the chart be the region. Because Sodium boxes a region once and divides inside it with rules, so a frame in a frame 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 count line cut above zero makes a 5% change look like a doubling.
- Should
- Use type="area" for one series, or to fill under the yellow series of several; the other lines stay lines. Because two filled areas cover each other, and the fill is the yellow series' weight.
State order
4 states, highest first
- 1
- loading
- 2
- error
- 3
- empty
- 4
- ready
Accessibility
6 checks
- Each x value is a button named with its values ("Oct 4: Rows loaded 214.3K"), 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.
- The yellow series draws in --accent-text, 6.2:1 on white, never in solid yellow; its heads and area are yellow edged in that line.
- Ink lines are 18.3:1 and 5.6:1; a third series repeats a step dashed rather than dropping under 3:1.
- A status series is named in the legend, the readout and the table, so colour is never the only sign.
- The legend's buttons are toggles with aria-pressed, the filled or empty square showing the state; 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 readout; Shift moves seven.
- Home / End
- Go to the first or last point.
- Escape
- Hides the readout.
Edge cases
8 edge cases
- Missing value
- A gap in the line and None in the readout 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.
- Short chart
- One y interval per 28px of plot, four at most, so labels never crowd.
- Right to left
- x runs from the right, the y axis sits on the right and the arrow keys follow the screen.
- Dark theme
- The yellow series turns yellow on the near-black page; ink flips to near-white.
- Reduced motion
- The line and the area are there at once; nothing draws or wipes.
- Forced colors
- Lines draw in CanvasText and the area drops; dashes keep series apart.
API
11 props
type'line' | 'area'default'line'labelstringdata, xKey, configChartRow[], string, ChartConfigaccentstring | falsedefaultfirst seriesframe'frame' | 'plain'default'frame'title, value, description, actionsReactNodeunit'duration' | 'count' | 'bytes'heightnumberdefault200loading, error, onRetry, retrying, emptyboolean, ReactNode, () => void, boolean, ReactNodelegend, defaultHiddenboolean, string[]defaultmore than one seriescurve, zero'linear' | 'step', booleandefault'linear', true
Tokens
20 tokens
--data-1- #ffd400
--accent-text- #7a5d00
--text-1- #161512
--text-2- #55524a
--text-3- #6b675e
--fail- #b3261e
--ok- #2c6a3a
--warn- #c25e00
--line-faint- #efede6
--line- #e2dfd5
--line-control- #8a8478
--panel- #fafaf7
--type-micro- 400 11px/14px var(--font-mono)
--type-code-sm- 400 12px/16px var(--font-mono)
--type-label- 400 13px/16px var(--font-mono)
--type-label-sm- 400 12px/16px var(--font-mono)
--type-figure- 400 40px/1 var(--font-sans)
--dur-draw- 300ms
--dur-wipe- 240ms
--z-overlay- 50