Area chart

Shows change and magnitude with a filled first series. 1px grid and one optional spot color.

Preview

Sheetssheets

Chart data of Sheets, in sheets
Label	Sheets
Mon	8
Tue	14
Wed	12
Thu	22
Fri	18

In action

Sheet

Density this run

The field is filled, not shaded. One series, one ink, one press mark.

Sheets

Sheetssheets

Sheets
Label	Sheets
Mon	8
Tue	14
Wed	12
Thu	22
Fri	18

When to use

Use it for

One series over time where the volume under the line matters.
The same props as LineChart; the first series is filled.

Not for

Several overlapping series; the fills hide each other. Use LineChart.
Categories; use BarChart.

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 { AreaChart } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/area-chart.

2. Vendor the source

npx @noorddev/vlak-cli add area-chart

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/area-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 { AreaChart } from "@noorddev/vlak-react";

<AreaChart
  height={204}
  labels={days}
  series={[{ name: "Sheets", values: sheets }]}
  unit="sheets"
  annotations={[{ at: 3, label: "Press" }]}
/>

Props

AreaChart

Filled field. Same law as the line: hairlines, texture, one optional spot.

Prop	Type	Description
`series`required	`ChartSeries[]`
`labels`	`string[]`
`height`	`number`
`stacked`	`boolean`
`inverted`	`boolean`
`grid`	`boolean`
`ticks`	`number`
`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>.

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

Same as LineChart: a focusable, named plot and a visually hidden data table.

Markup

<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><path class="rs-chart-area" d="M0 44 L40 36 L80 40 L120 22 L160 26 L200 12 L240 16 L240 56 L0 56 Z"/><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-area

Depends on

/chart