Skip to content

Stacked bar chart

D3 API

Chart.Bar

For stacked view, you should pass stack into type prop

js
import { Chart } from '@semcore/ui/d3-chart';
import { Chart } from '@semcore/ui/d3-chart';

BarChartProps

BaseChartProps<> & {...}
NameTypeDescription
groupKeystring
xScaleScaleBand<any> | ScaleTime<anyany>
yScaleScaleLinear<anyany>
type"stack" | "group"
trendRecord<[]>

StackBar

It have children components Bar, HorizontalBar.

js
import { StackBar } from '@semcore/ui/d3-chart';

<StackBar>
  <StackBar.Bar />
  <StackBar.HorizontalBar />
</StackBar>;
import { StackBar } from '@semcore/ui/d3-chart';

<StackBar>
  <StackBar.Bar />
  <StackBar.HorizontalBar />
</StackBar>;

StackBarProps

& {...}
NameTypeDescription
xstringField name from `data` array item for the XAxis
ystringField name from `data` array item for the YAxis
stackanyStack generators
maxBarSizenumberThe maximum width of each Bar

Released under the MIT License.

Released under the MIT License.