D3 chart

For all common D3 chart properties, refer to D3 chart API.

Chart.Bar

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

Bar

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

BarProps

& {...}

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
hide	boolean	Element hide property
duration	number	Animation duration in ms
r	number | number[]	Radius of curvature
hMin	number	Minimal height
onClick	(data: {[key: string]:string | number | }, event: React.SyntheticEvent, 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
offset	[number, number] | ((index: number) => [number, number])	Defines the x and y offset for positioning bars