Skip to content

Radial Tree chart

D3 API

It have children component Title.

js
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>;
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

NameTypeDescription
data[]List of radians. `{ label: string; key: string; capSize?: number; icon?: React.FC; color?: string; iconColor?: string; iconSize?: number; }`
angleOffsetnumberAngel (in rads) that rotates chart. 0 means that first radian is exactly on top vertical line.
durationnumberDuration of appear and update animation.
centralMarginnumberGap between the chart center and radians start point.
labelMarginnumberGap around text label.
colorstringColor of all radian's line, cap and label.
capSizenumberSize of the cap (filled circle on the end of the radian).
iconReact.FCIcon, that displayed in the cap of the active radian (usage example `icon: UserM`).
iconColorstringColor of icon.
iconSizenumberSize of icon.
textSizenumberText size in radians' labels. 1.5x is used as default text size of center text.
activeKeystring | nullUsed to define the active radian in controlled way. Active radian is highlighted with inreased cap size.
onActiveKeyChange(activeKey: string | null) => void
defaultActiveKeystring | nullDefault value for `activeKey` property.
transparentbooleanEnables element transparency

Released under the MIT License.

Released under the MIT License.