Histogram

Shows a distribution in adjacent bins with 1px gaps.

Preview

Count

Count
Label	Count
0–1	4
1–2	11
2–3	18
3–4	9
4–5	3

In action

Bin

Line length

Adjacent bins, one hairline between. A density field on the 204.

Count

Count
Label	lines
0–1	4
1–2	11
2–3	18
3–4	9
4–5	3

When to use

Use it for

The distribution of one variable across ordered bins.
Adjacent bins with a 1px seam; the order is the axis.

Not for

Unordered categories; use BarChart.
Time series; use LineChart.

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

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

2. Vendor the source

npx @noorddev/vlak-cli add histogram

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

<Histogram
  height={204}
  bins={[
    { label: "0–1", count: 4 },
    { label: "1–2", count: 11 },
    { label: "2–3", count: 18 },
  ]}
  yLabel="Sessions"
/>

Props

Histogram

Prop	Type	Default	Description
`bins`required	`HistogramBin[]`
`height`	`number`	`204`
`unit`	`string`
`yLabel`	`string`
`grid`	`boolean`	`true`
`ticks`	`number`	`4`
`valueFormat`	`(n: number) => string`
`spot`	`string \| boolean`
`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 bins; a status tooltip reads the count
`Home, End`	First or last bin
`Escape`	Clears the cursor

Accessibility

A focusable, named plot with a visually hidden table of label and count per bin.

Markup

<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><rect class="rs-chart-hist" x="8" y="36" width="36" height="20"/><rect class="rs-chart-hist" x="45" y="20" width="36" height="36"/><rect class="rs-chart-hist" x="82" y="8" width="36" height="48"/><rect class="rs-chart-hist" x="119" y="24" width="36" height="32"/></svg></div>

Classes

.rs-chart-hist

Depends on

/chart