D3 chart

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

Chart.Area

For stacked view, you should pass true into stacked prop

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

StackedArea

It have children components Area.

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

<StackedArea>
  <StackedArea.Area />
</StackedArea>;

StackedAreaProps

& {...}

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
patterns		Enables charts patterns that enhances charts accessibility