What's New in ApexCharts 6.6

ApexCharts 6.6.0 shipped on July 27, 2026 with one headline feature, the unit chart, and a zoom-out fix. Nothing was removed or renamed, so existing charts render as before and upgrading needs no code changes.

Key takeaways

• New chart.type: 'unit' draws one mark per unit of value: dot clusters, pictograms, waffles and beeswarms.
• Six layouts through plotOptions.unit.layout: grouped, packed, columns, grid, grid with split, and scatter.
• Marks that move: transition: 'group' | 'flow' | 'identity' re-forms the same marks between states instead of redrawing.
• chart.type: 'waffle' presets the grid layout; grid.total: 100 makes a percentage waffle.
• Premium: unit and waffle render a trial watermark until a licence key is set.
• No breaking changes. Upgrading is npm install apexcharts@6.6.0.

The unit chart

A unit chart draws one discrete mark for every unit of value, so "37 of 200 seats" reads as a countable quantity instead of a bar or a slice. It is a non-axis chart, like pie or treemap. Flat counts with matching labels give one cluster per category:

new ApexCharts(el, {
  chart: { type: 'unit' },
  series: [276, 266, 3],
  labels: ['For', 'Against', 'Abstain'],
  plotOptions: { unit: { layout: 'grouped' } },
}).render()

layout picks the arrangement: a blob per category (grouped, the default), one shared packed blob, columns of stacked dots, a grid lattice, split mini-waffles, or scatter on value axes. On every update each mark tweens to its new position. transition decides whether marks stay in their category ('group', the default), migrate and recolour as a crowd ('flow'), or follow each datum's id ('identity'). For pictograms, set shape: 'image' and image.tint: true. See the unit chart guide.

Per-mark data, beeswarms and bubbles

Flat counts are the quick path. The object form gives every mark its own datum, which the scatter layout and the identity transition need. scatter.y: 'lanes' (the default) is a beeswarm that packs equal values so nothing overlaps; 'value' is a 2D plot, and sizeRange turns marks into area-scaled bubbles.

series: [{
  name: 'Cities',
  data: [
    { name: 'Zurich', x: 72000, y: 118, z: 1.4 },
    { name: 'Tokyo',  x: 40000, y: 83,  z: 37.4 }, // one object = one mark
  ],
}],
plotOptions: {
  unit: {
    layout: 'scatter',
    scatter: { y: 'value', sizeRange: [6, 44], xTitle: 'Income', yTitle: 'Cost of living' },
  },
},

Try the city bubbles demo. Every datum field (value, x, z, name, fillColor, id) is listed in the plotOptions.unit reference.

Waffles and percentage grids

chart.type: 'waffle' presets the grid layout with square cells. Set grid.total to a fixed cell budget, 100 for the classic percentage waffle; a largest-remainder rule makes the cells always sum exactly to that budget.

chart: { type: 'waffle' },
series: [38, 27, 21, 14],
labels: ['Coal', 'Gas', 'Hydro', 'Other'],
plotOptions: { unit: { grid: { total: 100 } } },

grid.split: true turns one lattice into small multiples, one mini-waffle per category, each filling its own tile against a faint track. See the energy mix demo and the waffle chart guide.

Other fixes

• Zooming out on a category axis no longer stalls before the last category; each step widens the view by at least one whole category.

The full notes are in the 6.6.0 GitHub release.

Licensing

The unit chart is the first Premium chart type, and the waffle alias shares its engine: without a licence key both render in trial mode with an APEXCHARTS watermark. Every other chart type stays under the Community License, free for individuals and organizations under $2M in annual revenue, budget or funding; see pricing.

Upgrading

npm install apexcharts@6.6.0

Or with a script tag:

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

No option or default changed. The unit chart is tree-shakeable: import the core and add the unit renderer, which serves both unit and waffle.

import ApexCharts from 'apexcharts/core'
import 'apexcharts/unit'

Frequently asked questions