BarChartbeta

Categorical bar chart — single, grouped, or stacked — on the design-token palette.

Playground

Settled
In progress

Bar chart: 9 categories, 2 series
Category	Settled	In progress
form	20	5
display	5	11
feedback	10	1
ai	0	10
layout	7	3
navigation	5	3
overlay	4	4
action	6	2
data	2	0

Stacked

Show legend

Show grid

Height (px)

<script lang="ts">
  import { BarChart } from '@urbicon-ui/blocks';

  const data = [
    { label: 'form', values: [20, 5] },
    { label: 'display', values: [5, 11] },
    { label: 'feedback', values: [10, 1] },
    { label: 'ai', values: [0, 10] },
    { label: 'layout', values: [7, 3] },
    { label: 'navigation', values: [5, 3] },
    { label: 'overlay', values: [4, 4] },
    { label: 'action', values: [6, 2] },
    { label: 'data', values: [2, 0] }
  ];
  const series = [{ label: 'Settled' }, { label: 'In progress' }];
</script>

<BarChart
  {data}
  {series}
  height={260}
/>

01 Examples

Grouped series

Two series rendered side by side per category — the default when each datum carries more than one value.

Revenue
Cost

Bar chart: 4 categories, 2 series
Category	Revenue	Cost
Q1	€42k	€30k
Q2	€55k	€38k
Q3	€48k	€41k
Q4	€67k	€52k

<div class="w-full max-w-2xl">
  <BarChart data={quarterly} series={revenueCost} formatValue={eur} />
</div>

Stacked

Set stacked to stack the series into one bar per category — useful for part-to-whole comparisons over time.

Revenue
Cost

Bar chart: 4 categories, 2 series
Category	Revenue	Cost
Q1	€42k	€30k
Q2	€55k	€38k
Q3	€48k	€41k
Q4	€67k	€52k

<div class="w-full max-w-2xl">
  <BarChart stacked data={quarterly} series={revenueCost} formatValue={eur} />
</div>

Single series

One value per datum renders simple bars. The legend hides automatically with a single series.

Bar chart: 5 categories
Category	Series 1
Mon	120
Tue	180
Wed	150
Thu	210
Fri	240

<div class="w-full max-w-xl">
  <BarChart data={visitors} height={200} />
</div>

02 Customization

Custom series colors

Each series accepts an explicit color (any CSS color or design token) to override the cycled categorical palette.

Revenue
Cost

Bar chart: 4 categories, 2 series
Category	Revenue	Cost
Q1	€42k	€30k
Q2	€55k	€38k
Q3	€48k	€41k
Q4	€67k	€52k

<div class="w-full max-w-2xl">
  <BarChart
    data={quarterly}
    series={[
      { label: 'Revenue', color: 'var(--color-primary)' },
      { label: 'Cost', color: 'var(--color-warning)' }
    ]}
    formatValue={eur}
  />
</div>

03 Accessibility

SVG with role="img"

The chart SVG carries role="img" and a generated aria-label summarising the category and series count. Pass ariaLabel to override it with a domain-specific description.

Data-table fallback

A visually hidden (sr-only) table mirrors the data — one row per category, one column per series — so screen-reader users get the exact values, not just the visual summary.

Per-bar tooltips

Each bar includes a native SVG <title> ("series — category: value"), giving a zero-JavaScript hover tooltip that the browser also exposes to assistive tech.

04 API Reference

16 props

16 props 1 required

Prop	Type	Default	Description
`data` required	`BarChartDatum[]`	—	Categories with per-series values.
`ariaLabel`	`string`	—	Accessible label; a summary is generated when omitted.
`class`	`string`	—	Extra classes merged onto the wrapper.
`formatValue`	`(value: number) => string`	—	Format values for axis labels, tooltips, and the data table.
`height`	`number`	`240`	Height property for the BarChart component
`locale`	`string`	—	BCP-47 locale for the default number formatter (when no `formatValue`).
`margin`	`ChartMargin`	—	Plot margins; merged over the defaults.
`preset`	`string`	—	Apply a named preset registered on `<BlocksProvider>`.
`series`	`ChartSeries[]`	—	Series metadata (labels + colors). Defaults to one generic series per value column found in `data`.
`showGrid`	`boolean`	`true`	Render horizontal gridlines.
`showLegend`	`boolean`	`true`	Show the series legend (only renders with >1 series).
`slotClasses`	`ChartSlotClasses`	—	Per-slot class overrides.
`stacked`	`boolean`	`false`	Stack series instead of grouping them side by side.
`unstyled`	`boolean`	—	Remove all default tv classes.
`width`	`number`	—	Fixed width in px; omit for responsive width.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

05 Types

Local type definitions used by this component.

7 types

Only referenced

Name	Kind	Category	Used by	Description
BarChartDatum	type	helper	1	One category (x-axis tick) with one value per series.
BarChartProps	interface	props	0	—
CartesianDatum	interface	helper	0	One category (x-axis tick) with one value per series — shared by the cartesian charts.
ChartMargin	interface	helper	1	Plot margins (px). Any omitted side falls back to the frame default.
ChartSeries	interface	helper	1	A data series shared across the cartesian charts.
ChartSlotClasses	type	helper	1	Per-slot class overrides for the charts family.
ChartSlot	type	helper	0	Union of chart slot names (kept in sync with `chartVariants`).

06 Installation

Import

import { BarChart } from '@urbicon-ui/blocks';

llm.txt