Category Bar

Single segmented bar showing how a whole splits into parts (or a value against bands), with an optional marker. Segments are separated by a surface gap; labels show boundaries.

Import

import { CategoryBar } from '@marbleui/ui'

Props

<CategoryBar>

Prop	Type	Default
segments *required	`{ label: string; value: number; color?: string \| undefined; }[]`	`—`
summary *required	`string`	`—`
className	`string`	`—`
marker	`{ value: number; label?: string \| undefined; }`	`—`
showLabels	`boolean`	`true`
title	`string`	`—`

Usage notes

One segmented bar showing how a whole splits into parts, or where a value falls against bands such as a credit score. For ranking many items use BarList; for a single value against a maximum use Meter.

<CategoryBar
  title="Storage by type"
  summary="62 GB used: video 30, images 18, documents 9, other 5."
  segments={[{ label: 'Video', value: 30 }, { label: 'Images', value: 18 }, { label: 'Documents', value: 9 }, { label: 'Other', value: 5 }]}
/>

Each segment’s width is its value over the sum. The numbers under the bar are unformatted running totals at each boundary (0, 30, 48, 57, 62); hide them with showLabels={false} if they crowd.
marker sits at marker.value on that same scale, which always starts at 0, with marker.label above it. For bands, make each segment’s value the band’s width.
Colors default to --chart-1…8 in order; for ordered bands pass sequential colors from var(--chart-seq-200) to var(--chart-seq-700).
The legend and “Show data” table come from ChartContainer. The marker is inside the chart image, so state its value in summary.

Example source · show

import { CategoryBar } from './category-bar'

export const styles = {
  'With marker': () => <CategoryBar className="w-96" title="Credit score" summary="Score 712 falls in the Good band (670–739)." segments={[{ label: 'Poor', value: 580, color: 'var(--chart-seq-200)' }, { label: 'Fair', value: 90, color: 'var(--chart-seq-300)' }, { label: 'Good', value: 70, color: 'var(--chart-seq-500)' }, { label: 'Excellent', value: 110, color: 'var(--chart-seq-700)' }]} marker={{ value: 712, label: '712' }} />,
  Composition: () => <CategoryBar className="w-96" title="Storage by type" summary="62 GB used: video 30, images 18, documents 9, other 5." segments={[{ label: 'Video', value: 30 }, { label: 'Images', value: 18 }, { label: 'Documents', value: 9 }, { label: 'Other', value: 5 }]} />,
}

Source: packages/ui/src/category-bar/category-bar.tsx

Catalog