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.

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.HorizontalBar

It have children components Bar, HorizontalBar.

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	Deprecated Stack generators
maxBarSize	number	The maximum width of each Bar
patterns		Enables charts patterns that enhances charts accessibility