Skip to main content
Urbicon UI
source

CompositionBar

Stacked-Bar mit Legend zur Visualisierung von Aggregat-Kompositionen.

Playground

Composition: 100 (3 shares) — Anteil A 60.0 %, Anteil B 30.0 %, Anteil C 10.0 %
ShareValuePercent
Anteil A6060.0 %
Anteil B3030.0 %
Anteil C1010.0 %
Loading syntax highlighting...

01 Examples

Heating Cost Pot

Stacked bar as a cost-pot composition: gas + heat pump electricity + maintenance + chimney sweep add up to the heating cost pot of a service charge statement.
Heating cost pot 2024 3.822,42 €
Composition: 3.822,42 € (4 shares) — Gas bill 57.7 %, Heat pump electricity 29.5 %, Heating system maintenance 9.4 %, Chimney sweep levy 3.3 %
ShareValuePercent
Gas bill2.206,09 €57.7 %
Heat pump electricity1.127,31 €29.5 %
Heating system maintenance361,02 €9.4 %
Chimney sweep levy128,00 €3.3 %
Loading syntax highlighting...

Sizes

Three height steps for different levels of hierarchy.
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Loading syntax highlighting...

Legend Placement

Four anchor positions for the legend (top, right, bottom, left).
Top 2.650,00 €
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Right 2.650,00 €
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Bottom 2.650,00 €
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Left 2.650,00 €
Composition: 2.650,00 € (5 shares) — Rent 54.7 %, Groceries 18.1 %, Electricity & gas 8.3 %, Mobility 6.8 %, Savings 12.1 %
ShareValuePercent
Rent1.450,00 €54.7 %
Groceries480,00 €18.1 %
Electricity & gas220,00 €8.3 %
Mobility180,00 €6.8 %
Savings320,00 €12.1 %
Loading syntax highlighting...

Vertical Orientation

Stacked column for vertical layouts (e.g. sidebar visualizations).
Composition: 3.822,42 € (4 shares) — Gas bill 57.7 %, Heat pump electricity 29.5 %, Heating system maintenance 9.4 %, Chimney sweep levy 3.3 %
ShareValuePercent
Gas bill2.206,09 €57.7 %
Heat pump electricity1.127,31 €29.5 %
Heating system maintenance361,02 €9.4 %
Chimney sweep levy128,00 €3.3 %
Loading syntax highlighting...

Tiny Segments

Very small segments are raised to a minimum width so hover and tooltip still work on them.
Composition: 966 (4 shares) — Main share 98.3 %, Mini A 0.8 %, Mini B 0.3 %, Mini C 0.5 %
ShareValuePercent
Main share95098.3 %
Mini A80.8 %
Mini B30.3 %
Mini C50.5 %
Loading syntax highlighting...

Total Override (Remainder)

If the explicit total exceeds Σ items.value, the unaccounted share is rendered as a dashed remainder area.
Expected 5.000,00 € 5.000,00 €
Composition: 5.000,00 € (4 shares) — Gas bill 44.1 %, Heat pump electricity 22.5 %, Heating system maintenance 7.2 %, Chimney sweep levy 2.6 %
ShareValuePercent
Gas bill2.206,09 €44.1 %
Heat pump electricity1.127,31 €22.5 %
Heating system maintenance361,02 €7.2 %
Chimney sweep levy128,00 €2.6 %
Expected 5.000,00 € (remaining)1.177,58 €23.6 %
Loading syntax highlighting...

Raw Color Overrides

Per-item color prop for brand-specific palettes (e.g. token allocations).
Composition: 100 % (4 shares) — Treasury 40 %, Liquidity 30 %, Team 15 %, Community 15 %
ShareValuePercent
Treasury40 %40 %
Liquidity30 %30 %
Team15 %15 %
Community15 %15 %
Loading syntax highlighting...

02 Customization

Custom Tooltip Snippet

Custom tooltip content with additional metadata via the tooltip snippet.
Composition: 3.822,42 € (4 shares) — Gas bill 57.7 %, Heat pump electricity 29.5 %, Heating system maintenance 9.4 %, Chimney sweep levy 3.3 %
ShareValuePercent
Gas bill2.206,09 €57.7 %
Heat pump electricity1.127,31 €29.5 %
Heating system maintenance361,02 €9.4 %
Chimney sweep levy128,00 €3.3 %
Loading syntax highlighting...

Compact Card Embedding

Embedded in a card with a header at the sm size.

Treasury Allocation

Q1 2026
Composition: 100 % (4 shares) — Treasury 40 %, Liquidity 30 %, Team 15 %, Community 15 %
ShareValuePercent
Treasury40 %40 %
Liquidity30 %30 %
Team15 %15 %
Community15 %15 %
Loading syntax highlighting...

03 Accessibility

ARIA Image Role + Summary

The bar container has role="img" with a combined aria-label summary (total plus each share with value and percent), so screen readers can grasp the bar as a whole.

Table Fallback

An sr-only table duplicates the data in tabular form (share / value / percent) for screen readers that prefer tables over images.

Keyboard Navigation

Tab focuses the next segment, Arrow keys move between segments, Home /End jump to the first/last, Enter/Space triggers onItemSelect.

Bidirectional Highlight

Hovering or focusing a bar segment dims all other segments AND highlights the matching legend entry (and vice versa) — the link runs through the shared item.id (fallback: index).

04 API Reference

24 props
24 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt