Sunburst Chart

Hierarchical part-to-whole data as concentric rings, with drill-down on click.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Each ring is one level of the hierarchy and each arc is sized by its value. A parent without a value takes the sum of its children.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart title="Disk usage" data={DISK_USAGE} valueFormatter={(value) => `${value} GB`} maw={400} />;
}

Inner radius

innerRadius sets the center hole as a ratio of the outer radius. 0 fills the center.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} innerRadius={0} maw={400} />;
}

Max depth

maxDepth limits how many rings are drawn. Deeper nodes still count toward their ancestors' values.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} maxDepth={2} maw={400} />;
}

Spacing and outline

ringGap spaces the rings in px, padAngle spaces neighbouring segments in degrees, and strokeColor and strokeWidth set the outline.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} ringGap={4} padAngle={1} strokeWidth={0} maw={400} />;
}

Labels

Names are written inside segments only where they fit, along the arc or along the radius. labelFontSize and labelColor style them; withLabels={false} turns them off.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} labelFontSize={13} maw={400} />;
}

Colors

Each top-level branch takes a palette color and its descendants a lighter tint of it. A node's color overrides its own fill and the tint its children inherit.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { BUDGET } from './data';

export function Demo() {
  return <SunburstChart data={BUDGET} valueFormatter={(value) => `$${value}k`} maw={400} />;
}

Zoom on click

With zoomOnClick, pressing a segment with children re-roots the chart on it. Press the center to go back up one level.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} zoomOnClick maw={400} />;
}

Legend

The legend is hidden by default. legend={{ show: true }} lists the top-level branches.

Loading demo…

import { SunburstChart } from '@plocks/charts';

import { DISK_USAGE } from './data';

export function Demo() {
  return <SunburstChart data={DISK_USAGE} legend={{ show: true }} maw={400} />;
}

Scan to open this page on your phoneplocks.dev/charts/SunburstChart

Related charts

Donut Chart

Pie Chart

Sunburst Chart

Basics

Inner radius

Max depth

Spacing and outline

Labels

Colors

Zoom on click

Legend

Related charts

Further reading

plocks