ApexCharts 8.1 and 8.2: Plugin Highlights, Safer Server Output, and 150 Fixes

ApexCharts 8.0.1 and 8.1.0 shipped on October 11 and 8.2.0 on October 13, with about 150 fixes from an audit of the 8.x code. Upgrade now if you render charts on the server from data you do not control; everywhere else, check the thirteen behaviour changes in the table below.

Key takeaways

• Server output escapes text (8.0.1), except the legend renderToHTML adds in 8.2, which writes its entries as HTML.
• Plugins can draw a part of each value (8.1). api.highlight() does it without adding a series.
• updateOptions and updateSeries copy what you pass (8.1). Read chart.w.config for the resolved config.
• renderToHTML emits the legend (8.2). The server HTML now matches the hydrated chart.
• Stacks, series groups and range labels change shape (8.2). The table says how.
• Upgrading is npm install apexcharts@8.2.0.

Which behaviours changed?

Change	Release	What you will see	How to reverse it
Updates copy their payload	8.1.0	The objects you pass to updateOptions and updateSeries keep their values (a Date bound stays a Date)	Read chart.w.config for the resolved config
A grouped updateOptions resolves with its own chart	8.1.0	The promise gives the chart you called it on	ApexCharts.getChartByID() for a sibling
A chart's yaxis beats window.Apex.yaxis	8.1.0	Global y-axis settings no longer override a chart's own	Set it in window.Apex only
Gauge bandsStyle.gap is in pixels	8.1.0	On most dials, bands sit closer together	Re-tune the gap in pixels
The gauge needle moves at the arc's speed	8.1.0	The needle no longer trails the value arc	plotOptions.radialBar.needle.animation.duration: 800
Hydration keeps animations and the toolbar off	8.1.0	A chart rendered with them off stays that way	Set them on in the rendered options
Ragged date or number stacks stack by x	8.2.0	Segments that were hidden now show	None; the old stacks were wrong
Series group values may reuse series names	8.2.0	Groups stack apart	Put all the series in one group
Range column labels get [start, end]	8.2.0	A label formatter's value is the pair	Read the end you want from it
Bar label formatters run once	8.2.0	A formatter's side effects happen once per label	None
Sparse numeric bars use the plot edges	8.2.0	Bars sit nearer the edges	xaxis.min and xaxis.max to pad
renderToHTML emits the legend	8.2.0	A legend beside the SVG, its entries written as HTML	Render with legend.show: false, and pass legend to hydrate() to show it in the browser
Treemap branches get their own tooltip	8.2.0	A second tooltip element, with the same classes plus .apexcharts-treemap-tooltip, so your tooltip CSS still applies	Code that read .apexcharts-tooltip for a branch queries .apexcharts-treemap-tooltip

What does api.highlight() give a plugin?

Since 8.1.0 a Weave plugin can hand the host a part of each value, and the chart draws it the way the highlight filter does: solid in front of the whole, in the slot the value already has. Before, the only route for a second number per datum was api.markDerived(), which adds a series and with it a legend entry, a tooltip row, an export column and, on a bar chart, half the width of every bar.

setup(api) {
  if (!api.can('highlight')) return
  const parts = api.highlight([
    { series: 'Orders', values: [42, 60, 58, 60, 60, 38, 51] },
  ])
  // null when the host does not take the parts: no highlight filter on the page,
  // a non-axis chart, a type that draws no parts, or the caller's data already has parts
}

The plugin below caps each day at a target. Change the target, or remove the plugin:

api.highlight() draws through the highlight filter, so the page imports apexcharts/features/highlight-filter, a Premium feature. See api.highlight in the plugins guide, and the highlight filter demos for the same drawing on a dashboard.

Why upgrade if you render on the server?

8.0.1 escapes text and attribute values in the SVG that server rendering returns. Before it, a label such as <img src=x onerror=...> from user data went into the SVG as markup. Two later changes alter what server rendering returns:

import ApexCharts from 'apexcharts/ssr'

// 8.2: the HTML carries the legend beside the SVG
const html = await ApexCharts.renderToHTML(options, { width: 640, height: 360 })

renderToString still returns the SVG alone, with no legend. The legend writes its entries as HTML, as it does in the browser, so on 8.2.0 a series name, pie label or distributed-bar category from data you do not control reaches the page as markup: strip markup from those first. And since 8.1.0 hydration keeps the options you rendered with: chart.animations.enabled: false and chart.toolbar.show: false stay off after hydrate(), where earlier versions turned them back on. Non-ASCII titles and labels now survive hydration intact. See server side rendering.

Other fixes

• New in 8.0.1: plugins read the sample behind a histogram, box plot or violin through api.data[].observations (#5342).
• Line charts render and heatmaps update faster (8.0.1).
• A fractional y-axis bound no longer freezes the page (8.0.1).
• An update on a destroyed chart warns and resolves instead of throwing, and render() after destroy() works (8.1.0).
• CSV export writes one row per category for OHLC and range series, and the time of day when two datetime categories share a day (8.1.0).
• The minified CommonJS and SSR builds keep their console warnings (8.1.0).
• The typings let tooltip.y.formatter return null to hide a row in a shared tooltip (8.2.0, #5344).
• A responsive breakpoint's options are removed when the breakpoint is left (8.2.0, #5347).
• Log, bound and tick settings stay on their own y-axis (8.2.0, #2800).
• Keyboard zoom keys do nothing on a chart that cannot zoom (8.2.0).

The full lists are in the 8.0.1, 8.1.0 and 8.2.0 GitHub releases.

Upgrading

npm install apexcharts@8.2.0

Or with a script tag:

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

Check the table against your charts: gauges that set bandsStyle.gap and data label formatters on range columns are the likeliest to need an edit.

Coming from 7.x, read the 7.9 and 8.0 notes and the 8.0 migration guide first.

Frequently asked questions