Skip to content

Stacked horizontal bar chart

D3 API

Chart.Bar

For Horizontal view, you should pass true into invertAxis prop, for stack 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.HorizontalBar

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.