Skip to content

Stacked bar chart

D3 chart

For all common D3 chart properties, refer to D3 chart API.

Chart.Bar

For stacked view, you should pass stack into type prop

js
import { Chart } from 'intergalactic/d3-chart';
import { Chart } from 'intergalactic/d3-chart';

BarChartProps

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

StackBar

It have children components Bar, HorizontalBar.

js
import { StackBar } from 'intergalactic/d3-chart';

<StackBar>
  <StackBar.Bar />
  <StackBar.HorizontalBar />
</StackBar>;
import { StackBar } from 'intergalactic/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
patternsEnables charts patterns that enhances charts accessibility

Released under the MIT License.

Released under the MIT License.