StackedBar

A bar of any number of parts, each sized by its share of the sum.

Overview

The make-up of one whole in three or more parts: results by status, spend by group.

Legend

Do
  • Changed24
  • New9
  • Same163
import { StackedBar } from "@hackcove/ui";

<StackedBar
  segments={[
    { label: "Changed", value: 24, tone: "warn" },
    { label: "New", value: 9, tone: "info" },
    { label: "Same", value: 163, tone: "muted" },
  ]}
  label="Screenshots by status"
  legend
/>
legend names every colour in words, with its value, under the bar.
Don't
import { StackedBar } from "@hackcove/ui";

<StackedBar
  segments={[
    { label: "Changed", value: 24, tone: "warn" },
    { label: "New", value: 9, tone: "info" },
    { label: "Same", value: 163, tone: "muted" },
  ]}
  label="Screenshots by status"
/>
Without legend the colours are never named, so the bar cannot be read by anyone who cannot tell them apart.

Usage

  • segments are { label, value, tone } in the order to draw; tone is muted, positive, warn, danger or info, and you map your own roles onto them.
  • Set legend so every colour is named in words under the bar, with its value.
  • Legend alone is the key for colours drawn elsewhere, such as a TableRow stripe.
  • size is sm, md or lg (default). A part with no value is zero wide.
  • Two parties are a SplitBar; progress toward a total is a ProgressBar.

Accessibility

  • The bar has role="img" and an aria-label of label followed by every part's name and whole percent; rounded, they may not add up to exactly 100.
  • A Legend is a list. Its swatches are hidden from assistive tech and its labels are always drawn, so colour is never the only signal.

API

StackedBar

A bar of any number of parts, each sized by its share of the sum, in the order given. A part with no value is zero wide. label names the bar for a screen reader, which hears every part's name and whole percent (rounded, so they may not add up to exactly 100). legend draws a Legend under the bar, each part's label with its value, so the colours are named in words.

label required
Type
string
legend

Draw the key under the bar. Defaults to false.

Type
boolean
Default
false
segments required
Type
readonly StackedSegment[]
size

Defaults to "lg".

Type
"sm" | "md" | "lg"
Default
lg

Legend

A key to the colours of a chart or a row stripe: a swatch in the TextTone colour, its label and an optional detail after it. Colour alone does not say it, so the label is always drawn. StackedBar legend draws one under the bar from its segments.

items required
Type
readonly LegendItem[]