SunburstChart

Hierarchical radial chart displaying nested data as concentric rings of arcs. Inner rings represent parent categories, outer rings represent children. Supports gradients, tooltips, and animated transitions.

Import

import {
  SunburstChart,
  SunburstSeries,
  SunburstArc,
  SunburstArcLabel
} from 'reaviz';

SunburstChart Props

SunburstSeries Props

SunburstArc Props

SunburstArcLabel Props

Basic Usage

const data = [
  { key: 'Backend', data: [
    { key: 'API', data: [
      { key: 'REST', data: 50 },
      { key: 'GraphQL', data: 30 },
    ]},
    { key: 'Database', data: [
      { key: 'Postgres', data: 40 },
      { key: 'Redis', data: 20 },
    ]},
  ]},
  { key: 'Frontend', data: [
    { key: 'React', data: 60 },
    { key: 'CSS', data: 25 },
  ]},
];

<SunburstChart
  height={400}
  width={400}
  data={data}
/>

With Gradient

import { Gradient } from 'reaviz';

<SunburstChart
  data={data}
  series={
    <SunburstSeries
      arc={<SunburstArc gradient={<Gradient />} />}
    />
  }
/>

Custom Color Scheme

<SunburstChart
  data={data}
  series={
    <SunburstSeries colorScheme={['#FF5722', '#2196F3', '#4CAF50']} />
  }
/>

Click Handling

<SunburstChart
  data={data}
  series={
    <SunburstSeries
      arc={
        <SunburstArc
          onClick={(event, d) => console.log(d)}
        />
      }
    />
  }
/>

No Animation

<SunburstChart
  data={data}
  series={<SunburstSeries animated={false} />}
/>

No Labels

<SunburstChart
  data={data}
  series={<SunburstSeries label={null} />}
/>

Notes

• Data can be flat (ChartShallowDataShape[]) or nested (ChartNestedDataShape[]) — nesting depth determines ring count
• Labels are auto-ellipsized to 10 characters and only rendered when the arc is large enough (area > 0.05)
• Label text color is automatically inverted from the arc fill for contrast
• Arcs brighten on hover (chroma brightness factor of 0.5)
• Uses D3 partition layout to compute arc positions from hierarchical data