D3 chart
For all common D3 chart properties, refer to D3 chart 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 '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.HorizontalBar
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 |