What's New in ApexCharts 6.6

ApexCharts 6.6 adds one big thing: the unit chart. Instead of collapsing a count into a single bar or slice, a unit chart draws one discrete mark for every unit of value, so "37 of 200 seats" or "% of goal" reads as a countable quantity. One chart.type: 'unit' covers a whole family of count-based visuals that used to need separate libraries: dot clusters, pictograms, waffles, and beeswarms. Its waffle alias presets the part-to-whole grid.

The move that makes it feel alive is the tween. On every update each mark migrates from its old position to its new one, so re-grouping, filtering, or a changing count re-forms the marks rather than redrawing from scratch.

Key takeaways

• One type, many charts: chart.type: 'unit' renders dot clusters, columns, pictograms, waffles, and beeswarms. chart.type: 'waffle' is the grid preset.
• Six layouts: grouped, packed, columns, grid, grid with split, and scatter, all set through plotOptions.unit.layout.
• Marks that move: a keyed tween (transition: 'group' | 'flow' | 'identity') re-forms the same marks between states instead of a hard redraw.
• Per-mark data: the object form gives every mark its own colour, position, size, and tooltip, and a stable id so a specific mark persists across a regroup.
• Premium chart type: the unit and waffle types render with a trial-mode watermark until a license key is set. Every other chart type stays free.
• No breaking changes: additive and opt-in, fully typed, and tree-shakeable via apexcharts/unit.

What is a unit chart?

A unit chart is a non-axis chart (no grid or scale by default, dispatched like a pie or treemap) where the count is the message. It is the right pick when you want a quantity to feel tangible: a part-to-whole where the whole is a countable population, a pictogram that puts a recognisable icon behind each unit, a waffle as a friendlier alternative to a pie, or a beeswarm that shows every observation on a value axis without the dots overlapping.

The simplest input is flat counts with matching labels. Each value becomes that many marks, grouped into a cluster per category.

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

The six layouts

plotOptions.unit.layout chooses how the marks are placed. One engine, six arrangements.

Layout	What it draws
grouped (default)	one phyllotaxis blob per category, laid out in a row
packed	one shared blob, coloured by group, minority nested in the centre
columns	each category is a vertical bar built from stacked dots
grid	one lattice of cells, a part-to-whole square (chart.type: 'waffle')
grid + split: true	one mini-waffle per category, a trellis of small multiples
scatter	marks on real value axes: a beeswarm, or a 2D value-value bubble plot

The scatter layout draws its own axes. scatter.y: 'lanes' (the default) is a beeswarm that packs equal values off the lane centre so nothing overlaps; scatter.y: 'value' switches to a 2D plot, and scatter.sizeRange turns the marks into area-scaled bubbles.

plotOptions: {
  unit: {
    layout: 'scatter',
    scatter: {
      y: 'value',          // 'lanes' (beeswarm) | 'value' (2D)
      sizeRange: [6, 44],  // area-scaled bubbles from datum.z
      xTitle: 'Income',
      yTitle: 'Cost of living',
    },
  },
}

How do the marks move on an update?

plotOptions.unit.transition decides which previous mark each new mark tweens from, which is what makes a re-group read as motion rather than a flicker.

• 'group' (default) keeps each mark in its category; category-level enters and exits fade in and out.
• 'flow' keys marks by global draw order, so the anonymous crowd migrates and recolours across a regroup, the circles-to-bars effect.
• 'identity' keys by each datum's id / name, so a specific mark persists across any regroup or relayout, keeping its colour and size.

Marks that leave fade out in place. The whole thing is a pure eased tween, with no physics simulation.

Giving each mark its own data

Flat counts are the quick path. The object form gives every mark its own datum, which is what the scatter layout and the identity transition need.

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
  ],
}]

Datum field	Used by	Meaning
value / y	all layouts	the mark's value (count weight, or the Y position in scatter)
x	scatter 2D	the mark's X position on the value axis
z	bubbles	the size value when scatter.sizeRange is set
name / label	tooltip	the mark's own label
fillColor	all layouts	per-mark colour, overriding the category colour
id	identity tween	stable key so a specific mark persists across a regroup

Pictograms drop out of the same system: set shape: 'image' and image.tint: true to recolour a monochrome icon to the category colour. sizeByValue scales each dot's radius by its per-unit value, and clusterLabels adds a curved arc above a blob or a straight label above a bar.

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 allocates the cells so they always sum exactly to the budget, with no rounding drift.

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

grid.split: true turns one lattice into a wall of mini-waffles, one per category, each filling value / max of its own tile against a faint track. The full grid and layout reference is on the waffle chart guide.

Handling large counts

When a count runs into the thousands, unitValue lets one mark stand for many (unitValue: 1000 draws one dot per thousand), and maxUnits (default 5000) caps the total, scaling counts down proportionally above it so a runaway dataset never tries to draw a million marks.

Bug fix: zoom-out on the last category

Alongside the unit chart, 6.6 fixes a zoom-out edge case: on some category axes, zooming out could stall before it reached the last category because of how the high edge was rounded. Zoom-out now always reaches the final category.

Licensing

The unit chart is the first Premium chart type, and its waffle alias shares the same engine. Without a valid license key they render in trial mode with an APEXCHARTS watermark; a key removes it. Every other chart type stays free under the Community license for individuals and organizations under $2M in annual revenue; larger organizations need a Commercial license. See the pricing page for the current terms. The licensing model for all the free chart types is unchanged.

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 new type ship in the package, so no separate @types install is needed. Nothing new activates until you set chart.type: 'unit', so existing charts are untouched.

The unit chart is tree-shakeable. Import the core and add only the unit renderer, which serves both the unit and waffle types:

import ApexCharts from 'apexcharts/core'
import 'apexcharts/unit' // dot / pictogram / waffle / beeswarm

Where to go next

• Unit chart guide: the layouts, data shapes, transitions, and pictograms.
• Waffle chart guide: percentage grids and small multiples.
• plotOptions.unit reference: every option, with defaults.
• Live demos: unit charts and waffle charts.

Frequently asked questions