D3 chart

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

Chart.CompactHorizontalBar

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

CompactHorizontalBarChartProps

BaseChartProps<> & {...}

Name	Type	Description
x	string	Field name from data array for the x-axis values
y	string	Field name from data array for the y-axis values
xScale	ScaleBand<any> | ScaleTime<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
onClickHoverRect	(index: number, e: React.SyntheticEvent) => void	Handle click by `HoverRect`. `index` is an index of the data array.
onClickBar	(barItem: number, e: React.SyntheticEvent) => void	Handle click by Bar.

CompactHorizontalBar

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

<CompactHorizontalBar />;

CompactHorizontalBarProps

& {...}

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
radius	number	Bars rounded corners
duration	number	Animation duration in ms
transparent	boolean	Enables element transparency
patterns		Enables charts patterns that enhances charts accessibility