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<> & {...}Name | Type | Description |
---|---|---|
groupKey | string | |
xScale | ScaleBand<any> | ScaleTime<any, any> | |
yScale | ScaleLinear<any, any> | |
type | "stack" | "group" | |
trend | Record<, []> |
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
& {...}Name | Type | Description |
---|---|---|
x | string | Field name from `data` array item for the XAxis |
y | string | Field name from `data` array item for the YAxis |
stack | any | Stack generators |
maxBarSize | number | The maximum width of each Bar |
patterns | Enables charts patterns that enhances charts accessibility |