ApexCharts 8.3 and 8.4: Cooperative Wheel Zoom, Text-Safe Labels, and Shadow DOM

ApexCharts 8.3.0 and 8.3.1 shipped on October 15, 8.4.0 on October 20 and 8.4.1 on October 21. Upgrade if chart labels come from data you do not control, and check the zoom default below if your users zoom with the wheel.

Key takeaways

• The wheel zooms with Ctrl or ⌘ held (8.3). A bare wheel scrolls the page past the chart.
• Names and labels from your data show as text (8.3.1, 8.4). Formatter output still renders as HTML.
• Charts work inside a shadow root (8.4.1). Web components and Lit elements need no workaround.
• tooltip.custom draws tree nodes (8.4). Sunburst, icicle and treemap branch tooltips call it.
• About 120 fixes across bars, stacks, axes, tree charts and trellis.
• Upgrading is npm install apexcharts@8.4.1.

Which behaviours changed?

Change	Release	What you will see	How to reverse it
Cooperative wheel zoom	8.3.0	A bare wheel scrolls the page and shows "Use Ctrl + scroll to zoom"	zoom.allowMouseWheelZoom: true; zoom.wheelHint: false hides the hint
Grouped 100% stacks each reach 100%	8.3.0	Each group stacks to its own total	None; the old shares were wrong
Series objects are left untouched	8.3.0	Your series no longer gain a group field	Read groups from your own config
Numeric xaxis.stepSize sets the step	8.3.0	Ticks fall every step and the axis ends on the last one	Remove stepSize, or set xaxis.max
Log axes reach below the base	8.3.0	Small values beside a zero are drawn inside the plot	None
Horizontal bars on a numeric axis sit by x	8.3.0	A series missing an x no longer shifts a row	None
Box plots ignore candlestick.type	8.3.0	'ohlc' no longer turns boxes into ticks	None
scrolled fires only for a pan that moves	8.3.1	Fewer calls, none for a vertical drag	None
Number formatters hide repeated y labels	8.3.1	3, 3, 2 reads 3, , 2	yaxis.labels.showDuplicates: true
Names and labels from your data show as text	8.3.1, 8.4.0	Markup in a series, category, goal or tree node name prints as written	Return HTML from a formatter
tooltip.custom runs on tree nodes	8.4.0	A custom written for points also runs for branches, with dataPointIndex: -1	Return null when opts.node is set
Trellis keeps chart.zoom.enabled: false	8.4.0	Panels no longer zoom, and the toolbar drops zoom, pan and reset	Remove the false
Sunburst and icicle honour dataLabels.enabled and drilldown.breadcrumb	8.4.0	enabled: false hides their labels; breadcrumb settings apply	Remove the setting

Why does the wheel no longer zoom?

A page of zoomable charts could not be scrolled: every chart under the pointer took the wheel. From 8.3.0 the default 'auto' wheel is cooperative: a bare wheel scrolls the page, and Ctrl + wheel (⌘ + wheel on a Mac) or a trackpad pinch zooms around the cursor. A bare scroll over the chart shows a short hint, translatable through the locale's toolbar.wheelZoomHint. Try both on the chart below:

For a single full-page chart, where the wheel has nothing else to do, keep the old behaviour:

chart: {
  zoom: { enabled: true, allowMouseWheelZoom: true }
}

See chart.zoom.

Why upgrade if labels come from user data?

8.3.1 escapes tree node names in tooltips, and 8.4.0 escapes series names, categories and goal names in the legend and tooltip, server output included. Before, a name such as <img src=x onerror=...> ran as markup. HTML that your legend.formatter, tooltip.custom or a tooltip formatter returns still renders, so escape any user data you put into it. See tooltip.custom.

Can a chart live in a web component?

From 8.4.1 a chart renders inside a shadow root with nothing to configure: its stylesheet goes into that root, var(--brand) colours set on the host resolve and are baked into exports, and menus and undo work. Shadow DOM and Web Components has a custom element to copy.

Other fixes

• Romanian gains its missing measure label (8.3.0, thanks @vicuts).
• A colour function set only on fill.colors no longer crashes (8.3.0, thanks @tplatenburg).
• A repeated x gets its own CSV row (8.3.1, thanks @NotAFlightRisk).
• Streaming lines animate in from the right path when they scroll (#5316, 8.4.0).
• Zero stacked columns no longer grow by the stroke width (#5046, 8.4.0).
• Reordered series keep a shared logarithmic axis (#5353, 8.4.0).
• A stepline keeps the run that leads into a null (#4787, 8.4.0).
• legendHover fires once per item, not on every mouse move (8.4.0).
• An open tooltip stays open across a data update (8.3.1).

The full lists are in the 8.3.0, 8.3.1, 8.4.0 and 8.4.1 GitHub releases.

Upgrading

npm install apexcharts@8.4.1

Or with a script tag:

<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.4.1/dist/apexcharts.min.js"></script>

Then check:

• Charts where users zoom with a bare wheel: set allowMouseWheelZoom: true or tell them about Ctrl.
• A tooltip.custom on a nested treemap, sunburst or icicle: return null when opts.node is set.
• Names or labels that carried deliberate markup: move it into a formatter.

Earlier in the 8.x line: 8.1 and 8.2, and 7.9 and 8.0 with the 8.0 migration guide.

Frequently asked questions