SunburstChart

Live preview

Loading example…

Radial partition: the open node in the center, its descendants in rings, each slice proportional to value. Clicking a segment zooms into it with an animated transition; the center or Escape zooms back out.

Import

import { SunburstChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/sunburst-chart.

Usage

<SunburstChart
  title="Servicios por sede, barbero y servicio"
  data={servicesByBranch}
  valueFormat="integer"
  height={380}
  half={false}
  levels={3}
  drillDown
  breadcrumb
  legend
  tooltip
  centerLabel
  segmentLabels
  gap={1.5}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing and caption of the data table.
`data` *	`HierarchyDatum`		Root of the tree; its name and total sit in the center.
`height`	`number \| "fill"`	`360`	Height of the drawing; the disc takes the smaller of width and height.
`aspectRatio`	`number`		Width / height ratio; sizes the drawing from the container width when `height` is not “fill”.
`valueFormat`	`ValueFormat`
`half`	`boolean`	`false`	Half disc opening upwards (a 180 degree fan) instead of a full circle.
`levels`	`number`	`3`	Rings shown around the open node.
`drillDown`	`boolean`	`true`	Click a segment to zoom into it, the center to zoom out.
`breadcrumb`	`boolean`	`true`
`legend`	`boolean`	`true`	Read-only legend of the open level’s branches.
`tooltip`	`boolean`	`true`
`centerLabel`	`boolean`	`true`	Name and total of the open node in the center.
`segmentLabels`	`boolean`	`true`	Labels along the segments where they fit.
`gap`	`number`	`1.5`	Gap between segments in pixels (measured at the inner ring).
`sort`	`boolean`	`true`
`animate`	`boolean`	`true`
`loading`	`boolean`
`labels`	`Partial<HierarchyLabels>`
`onFocusChange`	`((node: HierarchyNode) => void)`
`onNodeClick`	`((node: HierarchyNode) => void)`		Click on a segment that cannot be opened (a leaf).
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/sunburst-chart/sunburst-chart.tsx