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 '@semcore/ui/d3-chart';
BarChartProps
BaseChartProps<> & {...}Name | Type | Description |
---|---|---|
groupKey | string | |
xScale | ScaleBand<any> | ScaleTime<any, any> | |
yScale | ScaleLinear<any, any> | |
type | "stack" | "group" | |
trend | Record<, []> | |
onClickHoverRect | (index: number, e: React.SyntheticEvent) => void | Handle click by `HoverRect`. `index` is an index of the data array. |
onClickBar | (barItem: number, barKey: , e: React.SyntheticEvent) => void | Handle click by Bar. |
StackBar
It have children components Bar, HorizontalBar
.
js
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 |
patterns | Enables charts patterns that enhances charts accessibility |
Last updated: