Skip to main content
Urbicon UI
source

BarChartbeta

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

Playground

Revenue — Q1: 42Cost — Q1: 30Revenue — Q2: 55Cost — Q2: 38Revenue — Q3: 48Cost — Q3: 41Revenue — Q4: 67Cost — Q4: 52
  • Revenue
  • Cost
Bar chart: 4 categories, 2 series
CategoryRevenueCost
Q14230
Q25538
Q34841
Q46752
Loading syntax highlighting...

01 Examples

Grouped series

Two series rendered side by side per category — the default when each datum carries more than one value.
Revenue — Q1: €42kCost — Q1: €30kRevenue — Q2: €55kCost — Q2: €38kRevenue — Q3: €48kCost — Q3: €41kRevenue — Q4: €67kCost — Q4: €52k
  • Revenue
  • Cost
Bar chart: 4 categories, 2 series
CategoryRevenueCost
Q1€42k€30k
Q2€55k€38k
Q3€48k€41k
Q4€67k€52k
Loading syntax highlighting...

Stacked

Set `stacked` to stack the series into one bar per category — useful for part-to-whole comparisons over time.
Revenue — Q1: €42kCost — Q1: €30kRevenue — Q2: €55kCost — Q2: €38kRevenue — Q3: €48kCost — Q3: €41kRevenue — Q4: €67kCost — Q4: €52k
  • Revenue
  • Cost
Bar chart: 4 categories, 2 series
CategoryRevenueCost
Q1€42k€30k
Q2€55k€38k
Q3€48k€41k
Q4€67k€52k
Loading syntax highlighting...

Single series

One value per datum renders simple bars. The legend hides automatically with a single series.
Series 1 — Mon: 120Series 1 — Tue: 180Series 1 — Wed: 150Series 1 — Thu: 210Series 1 — Fri: 240
Bar chart: 5 categories
CategorySeries 1
Mon120
Tue180
Wed150
Thu210
Fri240
Loading syntax highlighting...

02 Customization

Custom series colors

Each series accepts an explicit `color` (any CSS color or design token) to override the cycled categorical palette.
Revenue — Q1: €42kCost — Q1: €30kRevenue — Q2: €55kCost — Q2: €38kRevenue — Q3: €48kCost — Q3: €41kRevenue — Q4: €67kCost — Q4: €52k
  • Revenue
  • Cost
Bar chart: 4 categories, 2 series
CategoryRevenueCost
Q1€42k€30k
Q2€55k€38k
Q3€48k€41k
Q4€67k€52k
Loading syntax highlighting...

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

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt