What's New in ApexCharts 6.7

ApexCharts 6.7 adds a new chart type, the sunburst: a hierarchical radial chart, a nested pie or donut. It draws tree-structured data as concentric rings, the innermost ring is the top level, each ring outward is one level deeper, and every child arc is nested inside the angular span of its parent. Where a treemap shows a hierarchy as nested rectangles and drilldown reveals one level at a time, a sunburst shows the whole tree at once, radially, with optional click-to-zoom.

The release also rounds and spaces the pie family's slices, gives the unit chart a parliament layout, and adds tooltips to point annotations. Two behavior changes are worth reading before you upgrade (see Compatibility).

Key takeaways

• New sunburst chart type: chart.type: 'sunburst' draws a hierarchy as concentric rings. It is free and tree-shakeable via apexcharts/sunburst.
• Two data shapes: a native children hierarchy, or an existing drilldown config read directly (flip chart.type and a drilldown donut becomes a sunburst).
• Shaped to taste: innerSize sets the donut hole (or '0%' for a solid pie), startAngle / endAngle crop it to a semicircle, and click-to-zoom (zoomOnClick) drills into a branch with a breadcrumb.
• Rounded, spaced slices: plotOptions.pie.borderRadius and plotOptions.pie.spacing now apply to pie, donut, and polarArea.
• Parliament layout for unit charts: plotOptions.unit.layout: 'arc' seats the marks in a hemicycle, with a tunable gather animation.
• Point-annotation tooltips: an annotated marker can carry its own hover tooltip.
• Two behavior changes: legend click on pie / donut / polarArea now toggles the slice, and premium features require an entitled plan. No API was renamed or removed.

What is a sunburst chart?

A sunburst is a non-axis chart (dispatched like a pie or treemap) that answers "what is this made of, and what is that made of" in one view. A single series whose data points carry a children array is all it needs:

const chart = new ApexCharts(el, {
  chart: { type: 'sunburst' },
  series: [{
    data: [
      { x: 'Mobile', y: 55, children: [
        { x: 'iOS', y: 30, children: [
          { x: 'iOS 17', y: 18 },
          { x: 'iOS 16', y: 9 },
        ]},
        { x: 'Android', y: 23 },
      ]},
      { x: 'Desktop', y: 33, children: [
        { x: 'Windows', y: 20 },
        { x: 'macOS', y: 10 },
      ]},
    ],
  }],
  plotOptions: {
    sunburst: { innerSize: '25%', borderRadius: 5, spacing: 1 },
  },
})
chart.render()

Each depth level is tinted lighter than its parent, so a branch reads as one family of arcs. Colours, stroke, legend, and title behave as they do on a pie or donut.

How do I shape a sunburst?

The ring is fully adjustable through plotOptions.sunburst.

Option	What it does
innerSize	centre hole radius (default '15%'); '0%' is a solid nested pie
borderRadius	rounds the corners of each arc (px)
spacing	opens a gap between neighbouring arcs (px)
startAngle / endAngle	rotate and crop the ring; -90 to 90 is a half-ring
zoomOnClick	click a wedge to zoom into that branch (on by default)
leaf	'extend' stretches a shallow branch to the rim; 'stop' leaves it short
tint	how much lighter each depth is than its parent

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

Turning a drilldown donut into a sunburst

A drilldown chart's data is already a hierarchy: the top-level series plus the drilldown.series entries each slice points at. A sunburst reads that same config directly, so an existing drilldown donut becomes a sunburst by flipping chart.type, with no change to the data. Per-level colors from the drilldown entries are honoured.

const chart = new ApexCharts(el, {
  chart: { type: 'sunburst' },
  series: [{
    data: [
      { x: 'Mobile', y: 55, drilldown: 'mobile' },
      { x: 'Desktop', y: 33, drilldown: 'desktop' },
    ],
  }],
  drilldown: {
    series: [
      { id: 'mobile', data: [{ x: 'iOS', y: 30 }, { x: 'Android', y: 23 }] },
      { id: 'desktop', data: [{ x: 'Windows', y: 20 }, { x: 'macOS', y: 10 }] },
    ],
  },
})
chart.render()

The sunburst is tree-shakeable: import ApexCharts from 'apexcharts/core' and add import 'apexcharts/sunburst', and a sunburst-only bundle pulls in none of the other chart types.

Rounded and spaced slices for the pie family

plotOptions.pie.borderRadius rounds the corners of each slice and plotOptions.pie.spacing opens a gap between slices, so a pie or donut can read as a set of separated, soft-cornered segments rather than a solid wheel. Both default to 0, so existing charts are unchanged, and both apply to pie, donut, and polarArea.

plotOptions: {
  pie: {
    borderRadius: 6,
    spacing: 2,
  },
}

The corner radius is clamped per slice so fillets never cross on thin slices, and each slice is inset symmetrically, so its mid-angle (and therefore its data label and hit region) stays put. See the rounded donut demo.

A parliament layout for the unit chart

The unit chart gains a seventh layout. plotOptions.unit.layout: 'arc' arranges the marks as seats in concentric arced rows across an annulus, a parliament or hemicycle, filled in category order so each category is a contiguous wedge. It is the natural shape for seat counts and any part-to-whole where a semicircle reads better than a grid.

plotOptions: {
  unit: {
    layout: 'arc',
    arc: {
      startAngle: -90,       // a top semicircle by default
      endAngle: 90,
      innerRadiusRatio: 0.4, // donut hole
      rows: 'auto',
    },
  },
}

The gather tween that moves marks between layouts is now tunable too, through plotOptions.unit.gather: easing picks the travel curve ('outCubic', 'inOutCubic', or an overshooting 'outBack') and enter sets where a fresh mark animates from ('burst', 'fade', or 'rise'). The unit chart is Premium; see Compatibility.

Tooltips on point annotations

Point annotations can now show a hover tooltip, so an annotated marker can carry its own explanatory text without a separate custom element.

annotations: {
  points: [{
    x: 'Feb',
    y: 42,
    marker: { size: 6 },
    tooltip: {
      enabled: true,
      text: 'Launch day',
    },
  }],
}

Pass text for static content (an array is joined with line breaks), or a formatter for HTML. It falls back to the annotation's label.text and inherits the global tooltip theme.

Reliability and security

6.7 also lands a broad correctness pass. A series missing its data no longer breaks the rest of the chart; updateSeries and updateOptions now reject their promise on a failed render instead of hanging; combo charts label the right series using real indices; server-side rendering no longer crashes on image fills; animation, resize, and timeout callbacks are guarded after destroy(); CSV export neutralises formula-injection; and NaN / Infinity guards were added across polarArea, custom series, axis labels, tooltips, and gradients so a stray non-finite value degrades gracefully instead of throwing.

Compatibility

Two behavior changes are worth reading before you upgrade. Neither renames or removes an option, and every existing config renders unchanged.

• Legend click on pie, donut, and polarArea now toggles the slice in and out, the same show/hide behaviour as an axis chart's legend. It previously darkened and expanded the slice. If your app relied on the old behaviour, review this.
• Premium features now require an entitled plan. The premium modules (the unit chart type plus storyboard, link, ink, measure, contextMenu, perspectives, and history) clear their watermark only on a premium or enterprise plan. A valid pro key, or the free tier, keeps them in trial mode with the watermark and logs a one-time upgrade notice; it is not treated as an invalid key. Every free chart type and module, including the new sunburst, is never gated. See the pricing page for the current terms.

Upgrade

Run npm install apexcharts@latest, or bump the version on your CDN link. The React, Vue, and Angular wrappers work unchanged on their existing peer ranges, and the TypeScript types for the sunburst, the pie borderRadius / spacing, and the unit arc layout ship in the package. Nothing new activates until you opt in, so existing charts are untouched.

import ApexCharts from 'apexcharts/core'
import 'apexcharts/sunburst' // the new hierarchical radial chart

Where to go next

• Sunburst chart guide: the data shapes, donut hole, zoom, and drilldown adapter.
• plotOptions.sunburst reference: every option, with defaults.
• Pie / donut guide: rounded and spaced slices, and the legend-toggle change.
• Live demos: sunburst charts.

Frequently asked questions