Charts

Plots one or more lines on a 204px field. 1px grid, textured series, and one optional spot color.

Preview

SheetsProofssheets

Chart data of Sheets and Proofs, in sheets
Label	Sheets	Proofs
Mon	12	4
Tue	18	6
Wed	15	5
Thu	26	9
Fri	24	7

In action

Run

Sheets this week

Two textures on one field. Spot is a single Crouwel red — not a rainbow.

SheetsProofssheets

Chart data of Sheets and Proofs, in sheets
Label	Sheets	Proofs
Mon	12	4
Tue	18	6
Wed	15	5
Thu	26	9
Fri	24	7

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
`series`required	`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
`values`required	`number[]`
`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.

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