Skip to content
Twentyfirst UIHalo

Stacked Bar Chart

Charts · StackedBarChart

Bars split into parts of a whole per period, with a hover tooltip and legend.

Props: labels, series ({name, tint, values}), height, width, barWidth, format(v), legend (false hides), label.

  • Three series at most, ordered bottom-up from the steadiest to the most volatile.
  • Segments use the tints' -ink colors with a 2px gap, so neighbours differ in lightness, not hue alone.
  • Hovering a period dims the others and shows totals per series, top series first.

Revenue by plan

Hover a bar for the split

€0.0k€15.0k€30.0kNovDecJanFebMarApr
StarterTeamBusiness

Props

StackedBarChart

PropTypeNotes
labelsstring[]Required
seriesSeries[]Required
height?number
width?number
barWidth?number
format?(v: number) => string
legend?boolean
label?string
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.