D3 chart

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

Chart.Donut

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

DonutChartProps

BaseChartProps<> & {...}

Name	Type	Description
xScale	ScaleLinear<any, any>	Custom x-axis scale
yScale	ScaleLinear<any, any>	Custom y-axis scale
innerRadius	number	Controls the inner radius of the donut
halfsize	boolean	Creates a semi-donut chart when enabled
innerLabel	React.ReactNode	Content displayed in the center of the donut
onClickPie	(key: , e: React.SyntheticEvent) => void	Callback triggered when a user clicks on a pie

Donut

It have children components Pie, Label, EmptyData.

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

<Donut>
  <Donut.EmptyData />
  <Donut.Pie />
  <Donut.Label />
</Donut>;

DonutProps

& {...}

Name	Type	Description
innerRadius	number	Inner radius
outerRadius	number	Outer radius
halfsize	boolean	Semi donut
duration	number	Animation duration in ms. Set `0` to disable animation.
paddingAngle	number	Additional padding between segments in radians.
patterns		Enables charts patterns that enhances charts accessibility
onClick	(key: string, event: React.SyntheticEvent) => void	Callback triggered when a user clicks on a pie