Rebar UI

1.0

opinion

StackedLineChart

Lines that plot a running total, so each line sits on top of the ones before it.

Tasks done per weekCumulative by tag, 14 Sep to 19 Oct
0918273614 Sep21 Sep28 Sep5 Oct12 Oct19 OctDesignEngResearchOps
Tasks done per week
Two series
0612192514 Sep21 Sep28 Sep5 Oct12 Oct19 OctDesignEng
Design and Eng
Single series
0134514 Sep21 Sep28 Sep5 Oct12 Oct19 OctResearch
Research only
Formatted axis
0h6.210000000000001h12.420000000000002h18.630000000000003h24.840000000000003h14 Sep21 Sep28 Sep5 Oct12 Oct19 OctDesignEng
Hours

In context

Delivery dashboardA card beside the area chart's totals
Output by tagEach line includes the ones below it
Last 6 weeks
0918273614 Sep21 Sep28 Sep5 Oct12 Oct19 OctDesignEngResearchOps

Props

PropTypeRequiredDefault
seriesStackedLineChartSeries[]Yes—
xLabelsstring[]Yes—
titlestring | undefinedNo—
ariaLabelstring | undefinedNo—
heightnumber | undefinedNo300
yFormat((v: number) => string) | undefinedNo(v: number) => Math.round(v).toLocaleString()
labelStepnumber | undefinedNo1
filterableboolean | undefinedNo—
bionicboolean | undefinedNo—
bionicOptionsBionicOptions | undefinedNo—

data-rebar-* attributes

data-rebar-component="stacked-line-chart" on the root <figure>; data-rebar-part="mark" on each point.

Migrating to Ant Design

Not codemod-covered — AntD ships no chart components of its own; a migration typically pre-computes the same cumulative sums and feeds them to whatever charting library's own line chart the target project uses.