Home > Docs > sunburst

sunburst

Configuration Structure

sunburst: {
  offsetX: number,
  offsetY: number,
  startAngle: number,
  endAngle: number,
  innerSize: string,
  borderRadius: number,
  spacing: number,
  leaf: 'extend' | 'stop',
  partition: 'normalize' | 'strict',
  tint: number,
  zoomOnClick: boolean,
  dataLabels: { ... },
    show: boolean,
    minAngleToShow: number,
    style: { ... },
      fontSize: string,
      fontFamily: string,
      fontWeight: string | number,
      colors: string[],
}

plotOptions

The sunburst renders a hierarchy as concentric rings, from the centre hole outward, one ring per level. It accepts a native children hierarchy or an existing drilldown config (adapter). See the sunburst chart guide for a walkthrough.

Sunburst is not in the default bundle since 8.0: add import 'apexcharts/sunburst' next to import ApexCharts from 'apexcharts', or add dist/sunburst.js on a script-tag page. A drilldown config is read as plain data here, so the sunburst needs no drilldown feature. Without the sunburst import the console names the line to add and the chart draws nothing.

offsetX

Default: 0

Sets the left offset of the whole sunburst area.

offsetY

Default: 0

Sets the top offset of the whole sunburst area.

startAngle

Default: 0

A custom angle from which the rings should start. Combine with endAngle for a semi-circle sunburst.

endAngle

Default: 360

A custom angle at which the rings should end.

innerSize

Default: '15%'

Radius of the centre hole, as a percentage of the maximum radius (or a pixel value), like a donut's size. Set '0%' for a solid nested pie.

borderRadius

Default: 0

Rounds the corners of each arc (in px), with the same semantics as plotOptions.pie.borderRadius. Defaults to 0 (sharp corners).

spacing

Default: 1

Gap between adjacent arcs (in px), with the same semantics as plotOptions.pie.spacing.

leaf

Default: 'extend'

How a branch that bottoms out before the deepest level is drawn. 'extend' (default) stretches the leaf arc out to the rim so the ring stays solid; 'stop' leaves the outer rings empty behind it.

partition

Default: 'normalize'

How a parent's wedge is split among its children. 'normalize' (default) divides by each child's share of its siblings, which is safe for any data; 'strict' expects children to sum to their parent's value.

tint

Default: 0.14

How much lighter each depth level is tinted than its parent colour (0 keeps the parent colour, 1 is white). A per-node color overrides the tint for that arc and its subtree.

zoomOnClick

Default: true

Click a wedge to zoom into that branch: its subtree fills the chart and a breadcrumb walks back. Click the focused inner ring to zoom out. Set false to keep the chart static.

From 8.4 the breadcrumb is the one the treemap and icicle use, so drilldown.breadcrumb styles it (show, formatter, position, offsets), without importing the drilldown feature. It stays in the top-left corner by default, where the rings leave room.

show

sunburst.dataLabels.show
Default: true

Whether to render the label on each arc. The global dataLabels.enabled: false also hides them (from 8.4; before, only this switch did).

minAngleToShow

sunburst.dataLabels.minAngleToShow
Default: 8

Hide the label on any arc narrower than this angle (in degrees), so tiny wedges do not overflow with text.

fontSize

sunburst.dataLabels.style.fontSize
Default: '12px'

Font size of the arc labels.

fontFamily

sunburst.dataLabels.style.fontFamily

Font family of the arc labels.

fontWeight

sunburst.dataLabels.style.fontWeight
Default: 400

Font weight of the arc labels.

colors

sunburst.dataLabels.style.colors

Array of colors for the arc labels.