D3 chart

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

RadialTree

This chart has children Title component.

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

<RadialTree>
  <RadialTree.Radian>
    <RadialTree.Radian.Label />
    <RadialTree.Radian.Line />
    <RadialTree.Radian.Cap />
    <RadialTree.Radian.Icon />
  </RadialTree.Radian>
  <RadialTree.Title></RadialTree.Title>
</RadialTree>;

RadialTreeProps

Name	Type	Description
data	[]	List of radians. `{ label: string; key: string; capSize?: number; icon?: React.FC; color?: string; iconColor?: string; iconSize?: number; }`
angleOffset	number	Angel (in rads) that rotates chart. 0 means that first radian is exactly on top vertical line.
duration	number	Duration of appear and update animation.
centralMargin	number	Gap between the chart center and radians start point.
labelMargin	number	Gap around text label.
color	string	Color of all radian's line, cap and label.
capSize	number	Size of the cap (filled circle on the end of the radian).
icon	React.FC	Icon, that displayed in the cap of the active radian (usage example `icon: UserM`).
iconColor	string	Color of icon.
iconSize	number	Size of icon.
textSize	number	Text size in radians' labels. 1.5x is used as default text size of center text.
activeKey	string | null	Used to define the active radian in controlled way. Active radian is highlighted with inreased cap size.
onActiveKeyChange	(activeKey: string | null) => void
defaultActiveKey	string | null	Default value for `activeKey` property.
transparent	boolean	Enables element transparency