D3 chart

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

Chart.Bubble

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

BubbleChartProps

BaseChartProps<> & {...}

Name	Type	Description
groupKey	never	Field name that groups the data points
xScale	ScaleLinear<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
onClickBubble	(index: number, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a bubble

Bubble

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

<Bubble />;

BubbleProps

& {...}

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 radius
label	string	Field name from `data` array item for the circle label
color	string	Circle color
markedCross	boolean	Cross in the center of the bubble
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 bubble

Bubble.Tooltip

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

<Bubble.Tooltip />;

Bubble.Circle

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

<Bubble.Circle />;

BubbleCircleProps

Name	Type	Description
index	number	Item data index
visible	boolean	Item visibility