Developer 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<> & {...}| Name | Type | Description |
|---|---|---|
| groupKey | string | |
| xScale | ScaleBand<any> | ScaleTime<anyany> | |
| yScale | ScaleLinear<anyany> | |
| type | "stack" | "group" | |
| trend | Record<[]> |
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
& {...}| 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 |