What's New in ApexCharts 6.7

ApexCharts 6.7.0 shipped on August 2 with a new sunburst chart type, rounded and spaced pie slices, a parliament layout for the unit chart and tooltips on point annotations. No option was renamed or removed, but two behavior changes are worth checking before you upgrade, so see the table below.

Key takeaways

• New sunburst chart type draws a hierarchy as concentric rings, with click-to-zoom.
• An existing drilldown config renders as a sunburst when you change chart.type.
• plotOptions.pie.borderRadius and spacing round and separate pie, donut and polarArea slices.
• plotOptions.unit.layout: 'arc' seats unit-chart marks in a parliament hemicycle.
• Two behavior changes: pie-family legend clicks toggle the slice, and Premium features need a premium or enterprise plan.
• Upgrading is npm install apexcharts@6.7.0.

Which defaults changed?

Change	Release	What you will see	How to reverse it
Legend click on pie, donut and polarArea toggles the slice	6.7.0	Clicking a legend item hides or shows that slice, as on an axis chart. It used to darken and expand it	legend: { onItemClick: { toggleDataSeries: false } } turns the toggle off. No option brings back darken and expand
Premium features need a premium or enterprise plan	6.7.0	With a pro key or no key, the unit chart, storyboard, link, ink, measure, contextMenu, perspectives and history keep the trial watermark and log a one-time upgrade notice. The key is not treated as invalid	No option. A premium or enterprise plan clears the watermark; see pricing

The legend click section of the pie guide describes the new behavior.

What does the sunburst chart do?

A sunburst 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 sits inside its parent's wedge. One series whose 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()

Clicking a wedge zooms into that branch, with a breadcrumb back out; zoomOnClick: false keeps the chart static. A drilldown config renders as a sunburst with no change to the data. It is tree-shakeable via import 'apexcharts/sunburst'. The plotOptions.sunburst reference lists every option, from the donut hole to a semicircle crop.

Rounded and spaced pie slices

plotOptions.pie.borderRadius rounds the corners of each slice and plotOptions.pie.spacing opens a gap between slices, in pixels. Both apply to pie, donut and polarArea, and both default to 0, so existing charts are unchanged.

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

Each slice is inset symmetrically, so its data label and hit region stay put. See the rounded donut demo and Rounded and spaced slices in the pie guide.

A parliament layout for the unit chart

plotOptions.unit.layout: 'arc' arranges the marks as seats in concentric arced rows, filled in category order so each category is a contiguous wedge. It suits 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',
    },
  },
}

plotOptions.unit.gather now tunes the tween between layouts through easing and enter. See the parliament demo and the arc layout in the unit chart guide. The unit chart is Premium and needs a premium or enterprise plan. The sunburst and the pie options are covered by the Community License, free under $2M in annual revenue, budget or funding; see pricing.

Other fixes

• New: point annotations take a hover tooltip through tooltip.text or a formatter, falling back to label.text.
• A series missing its data no longer breaks the series after it.
• updateSeries and updateOptions reject their promise when a render fails, instead of hanging.
• Goal lines and data labels on combo charts attach to the right series when some are hidden.
• Server-side rendering no longer crashes on image fills.
• Animation, resize and timeout callbacks no longer fire after destroy().
• CSV export neutralises values that start with a formula character, so a file cannot run a formula when opened.
• NaN and Infinity no longer throw in polarArea, custom series, axis labels, tooltips and gradients.
• A stuck zoom shift-latch, a keyboard-navigation listener leak on updateOptions and an empty-candlestick crash are fixed.

The full list is in the 6.7.0 GitHub release.

Upgrading

npm install apexcharts@6.7.0

Or with a script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/6.7.0/apexcharts.min.js"></script>

The React, Vue and Angular wrappers work unchanged on their existing peer ranges, and the new options ship with TypeScript types. Check the two behavior changes if you use pie-family legends or Premium features on a pro key.

Frequently asked questions