Bar chart

Compares values with vertical or horizontal bars. Thin ink marks, square ends, optional stacks.

Preview

This issue

This issue
Label	Value
Alkmaar	42
Delft	28
Haarlem	21
Utrecht	16

In action

Press

Issues by city

Thin ink bars. Flush, no radius. Vertical or across.

This issue

This issue
Label	Value
Alkmaar	42
Delft	28
Haarlem	21
Utrecht	16

When to use

Use it for

Comparing categories; data for one series, series plus labels for several.
stacked when the series share a field; orientation="horizontal" for long labels.

Not for

Continuous time; use LineChart.
Parts of one whole; use Donut or Share.

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

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

2. Vendor the source

npx @noorddev/vlak-cli add bar-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/bar-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 { BarChart } from "@noorddev/vlak-react";

<BarChart
  height={204}
  orientation="horizontal"
  data={[
    { label: "Alkmaar", value: 42 },
    { label: "Delft", value: 28 },
  ]}
  unit="issues"
/>

<BarChart
  labels={["Q1", "Q2", "Q3"]}
  series={[
    { name: "Sheets", values: [12, 18, 9] },
    { name: "Proofs", values: [4, 6, 3] },
  ]}
  stacked
/>

Props

BarChart

Prop	Type	Default	Description
`data`	`{ label: string; value: number; }[]`
`series`	`ChartSeries[]`
`labels`	`string[]`
`height`	`number`	`204`
`orientation`	`BarOrientation`	`"vertical"`
`stacked`	`boolean`
`inverted`	`boolean`
`grid`	`boolean`	`true`
`ticks`	`number`	`4`
`unit`	`string`
`yLabel`	`string`
`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 bars; a status tooltip reads the values
`Home, End`	First or last bar
`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; the legend is aria-hidden because the table names the series.

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"/><rect class="rs-chart-bar" x="20" y="18" width="8" height="38"/><rect class="rs-chart-bar" x="48" y="10" width="8" height="46"/><rect class="rs-chart-bar" x="76" y="24" width="8" height="32"/></svg></div>

Classes

.rs-chart-bar

Depends on

/chart