Bar chart

Vertical or horizontal. Thin ink bars, no radius. Stacked when the series share a field.

This issue

2040AlkmaarDelftHaarlemUtrecht
Chart data
LabelValue
Alkmaar42
Delft28
Haarlem21
Utrecht16

Press

Issues by city

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

This issue

2040AlkmaarDelftHaarlemUtrecht
Chart data
LabelValue
Alkmaar42
Delft28
Haarlem21
Utrecht16

Install

npx @noordvc/raster-cli add bar-chart

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>

React

import { BarChart } from "@/components/raster/chart";

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

Classes

.rs-chart-bar

Depends on

/chart