D3 chart

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

Chart.Area

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

AreaChartProps

BaseChartProps<> & {...}

Name	Type	Description
groupKey	string	Field name that groups the data points
xScale	ScaleLinear<any, any> | ScaleTime<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
showDots	boolean	Controls whether to display dots on the area chart lines
curve		D3 curve factory for line interpolation (e.g., curveLinear, curveCardinal)
stacked	boolean	Enables stacked area chart mode
onClickArea	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a chart at a position corresponding to a data item

Area

It have children components Dots, Null.

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

<Area>
  <Area.Dots />
  <Area.Null />
</Area>;

AreaProps

& {...}

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
curve		Curve method
duration	number	Animation duration in ms
transparent	boolean	Enables element transparency
patterns		Enables charts patterns that enhances charts accessibility
onClick	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a chart at a position corresponding to a data item