Bin
Line length
Adjacent bins, one hairline between. A density field on the 204.
Count
| Label | count |
|---|---|
| 0–1 | 4 |
| 1–2 | 11 |
| 2–3 | 18 |
| 3–4 | 9 |
| 4–5 | 3 |
Histogram
Adjacent bins, one hairline between. A density field, not a dashboard widget.
Count
| Label | count |
|---|---|
| 0–1 | 4 |
| 1–2 | 11 |
| 2–3 | 18 |
| 3–4 | 9 |
| 4–5 | 3 |
Install
npx @noordvc/raster-cli add histogram
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>
React
import { Histogram } from "@/components/raster/chart";
<Histogram
height={204}
bins={[
{ label: "0–1", count: 4 },
{ label: "1–2", count: 11 },
{ label: "2–3", count: 18 },
]}
/>Classes
.rs-chart-hist