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

import { Chart } from '@semcore/ui/d3-chart';

BarChartProps

BaseChartProps<> & {...}

Name	Type	Description
groupKey	string	Field name that groups the data points
xScale	ScaleBand<any> | ScaleTime<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
type	"stack" | "group"	Controls whether bars are grouped side-by-side or stacked
trend	Record<, []>	Optional trend line data to overlay on the bars
onClickHoverRect	(index: number, e: ) => void	Handle click by `HoverRect`. `index` is an index of the data array.
onClickBar	(barItem: number, barKey: , e: ) => void	Handle click by Bar.
maxBarSize	number	The maximum width of a bar

HorizontalBar

Horizontal chart Bar.

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
onClick	(data: {[key: string]:string | number | }, event: , barIndex: number, barKey: string) => void	Bar click handler
transparent	boolean	Enables element transparency
maxBarSize	number	The maximum width of each Bar
patterns		Enables charts patterns that enhances charts accessibility

GroupBar

It have children components Bar, HorizontalBar.

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	Deprecated Scale for group bars
maxBarSize	number	The maximum width of each Bar