ApexCharts 7.2, 7.3 and 7.4: The Plugin API Grows Up

ApexCharts 7.2.0, 7.3.0 and 7.4.0 shipped over five days in September, and most of the work is in Weave, the plugin host. No option was removed, but four changes can alter an existing setup, each reversible in one line.

Key takeaways

• The Weave plugin contract went from v1 to v5. Plugins written against v1 run unchanged.
• Heatmap cells can be hexagons, circles or diamonds (7.2) with plotOptions.heatmap.shape.
• A zoomed chart with a hidden toolbar now has a way back (7.4).
• borderRadiusWhenStacked is back (7.4) after its removal in 7.0.
• npm i apexcharts@next now fails (7.3). Prereleases use release-line tags.
• Upgrading is npm install apexcharts@7.4.0.

Which defaults changed?

Change	Release	What you will see	How to reverse it
Legend collapses survive a data update	7.2.0	A series the viewer switched off in the legend stays off after an update	Call showSeries() after the update
No floating next tag	7.3.0	npm i apexcharts@next fails with "No matching version"	Install the tag your prerelease names, such as apexcharts@rc-7.4 (installation guide)
chart.zoom.resetControl is 'auto'	7.4.0	A zoomed chart with no toolbar reset shows a reset control, and Escape resets	zoom: { resetControl: false }, which turns off Escape too
plotOptions.bar.borderRadiusWhenStacked is read again	7.4.0	A 'last' left in your config squares the stack's baseline; it was ignored on 7.0 to 7.3	Remove it, or set 'all' (the default)

Weave reaches v5

Weave, the plugin host, went from contract v1 to v5. v2 adds api.info (what kind of chart the plugin is on), data[].raw (the caller's own data), api.categories and api.markDerived(), and plugins now run on pie, donut and radialBar. v3 adds api.reserve() so a plugin can ask the chart for room for its own UI, v4 adds api.pointer() to follow the point the viewer is on, and v5 adds api.info.stroke.dashArray.

apiVersion is a minimum, not the version you built against. A host skips a plugin that declares a newer version than its own, silently, so declare the oldest version you need and feature-detect the rest:

ApexCharts.registerPlugin({
  name: 'panel',
  apiVersion: 2,                                 // the minimum this needs
  setup(api) {
    if (typeof api.reserve === 'function') {     // v3, optional
      api.reserve({ right: 220 })
    }
  },
})

The plugins guide covers every addition.

Heatmap cell shapes (7.2)

plotOptions.heatmap.shape takes 'rect' (the default), 'hexagon', 'circle' or 'diamond'.

new ApexCharts(el, {
  chart: { type: 'heatmap' },
  plotOptions: { heatmap: { shape: 'hexagon' } },
  series: [/* ... */],
}).render()

'circle' and 'diamond' are inscribed in the existing cell box. 'hexagon' draws a tessellating honeycomb, with alternate rows offset half a cell and kept clear of the y-axis labels. Tooltips, keyboard navigation, legend range highlighting and the colour tween on update work unchanged.

See the honeycomb demo and the heatmap guide.

A way back out of a zoom (7.4)

Drag-to-zoom works with the toolbar hidden, but the reset button did not, which left a viewer inside a zoom with no way out. Now, while the chart is zoomed and nothing else on screen can reset it, one reset control is drawn where the toolbar would have been, and Escape resets too. A chart nobody zooms is unchanged.

chart: {
  toolbar: { show: false },
  zoom: { enabled: true, resetControl: 'auto' }
}

A completed drag-zoom also focuses the chart, so the +, - and 0 keyboard-zoom keys work after a mouse zoom. See chart.zoom.resetControl.

Other fixes

• resetSeries() and the toolbar reset restore the caller's own series again, after internal re-renders, appendData and legend collapses (#5283, #5118).
• CSV export keeps categories that print alike apart, and no longer keys unequal-x rows through Object.prototype.
• Inferred x-axis category labels are no longer lost, inferred numeric ticks honour their own semantics, and y-axis text alignment no longer runs for hidden axes.
• SSR estimates text bounds so the DOM shim can measure labels.
• Combo columns stack on the layer below rather than on the axis (#5105).
• Long point-annotation labels and their backgrounds stay inside the grid (#5106).
• The treemap tooltip stays inside the plot area, and brush selection handles inside the data range.
• Grouped sparkline tooltips stay in sync (#5282).
• A single-point stack rounds the right corners (#4845), and a grouped stacked chart rounds each group's outermost segments.
• apex-commons moves from ^0.5.0 to ^0.8.0.

The full lists are in the 7.2.0, 7.3.0 and 7.4.0 GitHub releases. Thanks to @jamalkamaladdin, @lazerg, @gioboa, @81reap, @lovasoa, @tarzan77cz, @aron-intframe and @GebleaAlex for their pull requests.

Upgrading

npm install apexcharts@7.4.0

1. Check the four changes against your charts.
2. If you deleted borderRadiusWhenStacked after reading the 7.0 release notes, you can set it again.
3. If you wrote a Weave plugin, do not raise its apiVersion to reach the new surface. Feature-detect instead.

The Community License is free under $2M in annual revenue, budget or funding. See the licence and pricing pages.

Frequently asked questions