Developer D3 API
Chart.Bar
For Horizontal view, you should pass true into invertAxis 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<[]> |
HorizontalBar
Horizontal chart Bar.
js
import { HorizontalBar } from '@semcore/ui/d3-chart';import { HorizontalBar } from '@semcore/ui/d3-chart';HorizontalBarProps
& {...}| 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 |
| color | string | Line color |
| duration | number | Animation duration in ms |
| r | number | number[] | Radius of curvature |
| transparent | boolean | Enables element transparency |
| maxBarSize | number | The maximum width of each Bar |
GroupBar
It have children components Bar, HorizontalBar.
js
import { GroupBar } from '@semcore/ui/d3-chart';
<GroupBar>
<GroupBar.Bar />
<GroupBar.HorizontalBar />
</GroupBar>;import { GroupBar } from '@semcore/ui/d3-chart';
<GroupBar>
<GroupBar.Bar />
<GroupBar.HorizontalBar />
</GroupBar>;GroupBarProps
& {...}| 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 |
| scaleGroup | any | Scale for group bars |
| maxBarSize | number | The maximum width of each Bar |