Rebar UI

1.0

opinion

Stacked Bar Chart

Each bar split into labelled segments, with its total above it.

Spend so farCost per project, split by kind (GBP)
$0$13,750$27,500$41,250$55,000Design ($21,000)Print ($14,200)Contractors ($8,000)$43,200Harbour rebrandDesign ($9,000)Contractors ($41,000)$50,000Tideline mobileDesign ($4,200)Print ($9,800)Contractors ($5,100)$19,100Depot signage
Spend so far
One bar
$0$11,880$23,760$35,640$47,520Design ($21,000)Print ($14,200)Contractors ($8,000)$43,200Harbour rebrand
Harbour rebrand
Two segments
$0$13,750$27,500$41,250$55,000Design ($9,000)Contractors ($41,000)$50,000Tideline mobileDesign ($4,200)Contractors ($5,100)$9,300Depot signage
No print

In context

Budget viewA card on the finance page
Spend by projectBudgets: £48,200, £72,900, £21,800
Oct
$0$13,750$27,500$41,250$55,000Design ($21,000)Print ($14,200)Contractors ($8,000)$43,200Harbour rebrandDesign ($9,000)Contractors ($41,000)$50,000Tideline mobileDesign ($4,200)Print ($9,800)Contractors ($5,100)$19,100Depot signage
Spend so far

Props

PropTypeRequiredDefault
barsStackedBarChartBar[]Yes—
titlestring | undefinedNo—
ariaLabelstring | undefinedNo—
heightnumber | undefinedNo340
yFormat((v: number) => string) | undefinedNo(v: number) => `$${Math.round(v).toLocaleString()}`
filterableboolean | undefinedNo—
bionicboolean | undefinedNo—
bionicOptionsBionicOptions | undefinedNo—