Design System

Bar Chart V1

Two series

WIP

A grouped bar chart rendered to static SVG with D3 at build time. Each object in data is a group, and every numeric key becomes a series.

Q1Q2Q3Q401020304050607080ValueQuarterCategory aCategory bGrouped Bar Chart Example
<BarChartV1
    data={[
        { group: 'Q1', a: 30, b: 45 },
        { group: 'Q2', a: 52, b: 38 },
        { group: 'Q3', a: 41, b: 60 },
        { group: 'Q4', a: 74, b: 55 },
    ]}
/>

Three series

The current colour range supports up to three series. The width and height props set the SVG viewBox, and the rendered chart scales to its container.

Q1Q2Q3Q4051015202530354045ValueQuarterCategory aCategory bCategory cGrouped Bar Chart Example
<BarChartV1
    width={700}
    height={320}
    data={[
        { group: 'Q1', a: 12, b: 28, c: 20 },
        { group: 'Q2', a: 25, b: 32, c: 18 },
        { group: 'Q3', a: 38, b: 24, c: 31 },
        { group: 'Q4', a: 44, b: 40, c: 27 },
    ]}
/>