D3 chart

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

Chart.ScatterPlot

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

ScatterPlotChartProps

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
valueKey	string	Optional field name for additional value data
onClickScatterItem	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a scatter item

ScatterPlot

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

<ScatterPlot />;

ScatterPlotProps

& {...}

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
value	string	Field name from `data` array item for the circle value
color	string	Circle color
valueColor	string	Circle value color
duration	number	Animation duration in ms
r	number	Radius of circles
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 scatter item