Chart.Bars

Bars, grouped by default.

JanFebMarAprMayJun01020304050
Chart of Projects published, Proposals accepted over 6 points
monthProjects publishedProposals accepted
January2418
February3122
March2825
April3530
May4236
June3833
<Chart.Bars />

Pass stacked: true on the y axis to stack them instead — worth it only when the series sum to a meaningful total.

API

PropTypeDefault
fill((datum: Record<string, unknown>, index: number) => string)Per-datum fill, for charts coloured by row rather than by series.
gapnumberPixels between two bars of the same category.
keysreadonly string[]Series to draw. Defaults to the root's value keys.
projected((datum: Record<string, unknown>, index: number, key: string) => boolean)Which bars are a projection rather than a record — the weeks ahead, a forecast, or the series still in flight while one is done. Those bars are drawn hatched inside a dashed outline in their series colour, so the eye reads them as pencilled-in, not done. Decided per bar: the datum and the series it belongs to.
radiusnumber4Corner radius of each bar, in pixels.
stackedbooleanStacks the series into one bar per category instead of grouping them side by side.

Plus every <g> prop. Source: chart/components/chart-bars.tsx.

stacked here mirrors the y axis: set it on both, or the bars and the scale will disagree about the maximum. fill is the escape hatch for a chart coloured by row rather than by series — a ranking where each bar is its own thing.

projected marks the data that are a forecast rather than a record — the weeks ahead on a calendar, say. Those bars are hatched inside a dashed outline in their series colour, so a reader never mistakes them for done:

<Chart.Bars projected={(datum) => `${datum.week}` >= today} />