Run
Sheets this week
Two textures on one field. Spot is a single Crouwel red — not a rainbow.
SheetsProofssheets
| Label | Sheets | Proofs |
|---|---|---|
| Mon | 12 | 4 |
| Tue | 18 | 6 |
| Wed | 15 | 5 |
| Thu | 26 | 9 |
| Fri | 24 | 7 |
Charts
Plots one or more lines on a 204px field. 1px grid, textured series, and one optional spot color.
Preview
In action
When to use
Use it for
- Up to four series over time on one field; solid, dashed, gray, and dotted keep them apart without hue.
- spot for the one accent the chart is allowed; Sparkline for a trend inside a row.
Not for
- Categories; use BarChart.
- More than four series; split them into SmallMultiples.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { LineChart, Sparkline } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/chart.
2. Vendor the source
npx @noorddev/vlak-cli add chart
The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/chart.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { LineChart, Sparkline } from "@noorddev/vlak-react";
<LineChart
height={204}
labels={days}
series={[
{ name: "Sheets", values: sheets },
{ name: "Proofs", values: proofs },
]}
unit="sheets"
yLabel="Output"
annotations={[{ at: 3, label: "Press" }]}
spot
/>
<Sparkline values={[3, 5, 4, 8, 7, 9]} label="Sheets" unit="k" />Props
LineChart
| Prop | Type | Default | Description |
|---|---|---|---|
seriesrequired | ChartSeries[] | ||
labels | string[] | ||
height | number | 204 | |
area | boolean | Fill under the first series. Prefer AreaChart for a dedicated area. | |
stacked | boolean | ||
inverted | boolean | ||
grid | boolean | true | |
ticks | number | 4 | |
unit | string | ||
yLabel | string | ||
xLabel | string | ||
annotations | ChartAnnotation[] | ||
domain | [number, number] | ||
spot | string | boolean | ||
valueFormat | (value: number) => string | ||
locale | string | BCP 47 tag for number formatting; undefined is the reader's own. |
Also accepts HTMLAttributes<HTMLDivElement>.
Sparkline
| Prop | Type | Default | Description |
|---|---|---|---|
valuesrequired | (number | null)[] | ||
width | number | 120 | |
height | number | 28 | |
spot | string | boolean | ||
label | string | What the trend is of; leads the accessible name and the table. | |
unit | string | ||
locale | string | BCP 47 tag for number formatting; undefined is the reader's own. |
Also accepts HTMLAttributes<HTMLSpanElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Focuses the plot |
| Arrow right, Arrow left | Moves the cursor across the points; a status tooltip reads the values |
| Home, End | First or last point |
| Escape | Clears the cursor |
Accessibility
- The plot is a focusable <svg role="group"> with aria-roledescription="interactive chart", named by aria-label, aria-labelledby, yLabel, or the series names.
- A visually hidden table carries every value, so the data reads without the picture; the tooltip is role="status".
- Sparkline is role="img" with a name built from label, the count, and the last value, plus the same hidden table.
- Numbers format through Intl.NumberFormat; locale picks the reader's own by default. Marks stay visible in forced colors.
- Null or non-finite samples create gaps instead of fabricated zeros. Missing values read as No data; empty plots announce their state, and an empty Sparkline has no invented last point.
- Explicit domains generate ticks within their bounds and clip marks to the plot. Without a domain, negative values remain visible.
Markup
<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><line class="rs-chart-grid" x1="0" x2="240" y1="56" y2="56"/><path class="rs-chart-line" d="M0 44 L40 36 L80 40 L120 22 L160 26 L200 12 L240 16"/></svg></div>
Classes
.rs-chart.rs-chart-canvas.rs-chart-line.rs-chart-grid.rs-chart-axis.rs-chart-bar.rs-spark.rs-chart-legend-svg.rs-chart-svg