Migrating to v7

ApexCharts 7.0's headline breaking change is that the default bundle stops shipping every feature. Nine optional features became explicit imports. Two smaller changes affect stacked bars and data labels; both are covered below.

Everything else is the same. Chart types, options, methods, events and the rendering are unchanged, so for most projects the upgrade is npm install apexcharts@7 and nothing else.

Does this affect me?

Only if you use one of these nine features. If you do not, there is nothing to do.

Feature	You are using it if your config or code has…
Trellis (small multiples)	trellis: { by }, trellis.row, trellis.column, or ApexCharts.trellis()
Storyboard	chart.storyboard, chart.storyboard.bind()
Perspectives (shareable views)	getViewState(), applyViewState()
Ink (annotation authoring)	chart.ink.enabled
Canvas renderer (Strata)	chart.renderer: 'canvas' or 'auto'
Linked views & crossfilter	chart.link, ApexCharts.crossfilter
Measure ruler	chart.measure.enabled, startMeasure()
Rewind (undo / redo)	chart.history.enabled
Context menu	chart.contextMenu

You do not need to change anything if you use only chart types, axes, tooltips, legend, toolbar, exports, annotations, keyboard navigation, morph, drilldown, themes, plugins (Weave), custom series (Marks), or design tokens (Facet). Those all stay in the default bundle.

The fix is one line

Whatever the feature, the shape is the same. With a bundler:

import ApexCharts from 'apexcharts'
import 'apexcharts/features/trellis'   // the one line

Or with a plain <script> tag, a second tag after the main one:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/features/trellis.js"></script>

The import is side-effecting: it registers the feature on the ApexCharts class and there is nothing to name or pass along. Order matters only in that the feature must load after the main bundle.

Feature	Bundler	Script tag
Trellis	apexcharts/features/trellis	dist/features/trellis.js
Storyboard	apexcharts/features/storyboard	dist/features/storyboard.js
Perspectives	apexcharts/features/perspectives	dist/features/perspectives.js
Ink	apexcharts/features/ink	dist/features/ink.js
Canvas renderer	apexcharts/features/renderer-canvas	dist/features/renderer-canvas.js
Linked views	apexcharts/features/link	dist/features/link.js
Measure ruler	apexcharts/features/measure	dist/features/measure.js
Rewind	apexcharts/features/history	dist/features/history.js
Context menu	apexcharts/features/context-menu	dist/features/context-menu.js

Storyboard registers Perspectives as well, so if you import Storyboard you do not need Perspectives too.

You will not have to guess

Every one of the nine warns in the console when its configuration is present but the feature is not, and each warning names both routes:

ApexCharts: `trellis` requires the trellis feature, which is not in the
default bundle. Bundler: import 'apexcharts/features/trellis'. Script tag:
add <script src='.../dist/features/trellis.js'> after apexcharts.js.
Rendering as a single chart.

Where a chart can still draw something sensible without the feature, it does, and the warning says what it did instead. A trellis renders as a single chart; a chart asking for renderer: 'canvas' draws with SVG. Nothing throws, and nothing disappears without telling you.

Why

The short version: 24% of the 6.10.0 default bundle was licence-gated Premium code that an unlicensed user could only run with a watermark on their chart. Everyone downloaded it. That is now 0%.

The default path was also the maximal one. Tree-shaking existed, but you only got it by reading the docs and rewriting your imports, so the overwhelming majority of projects shipped every feature whether or not they used one. Moving the rarely-used features behind an explicit import inverts that: the default is now the smaller thing, and the cost of a feature is paid by the projects that ask for it.

	gzip
6.10.0 default bundle	291,654 B
7.0.0 default bundle	252,005 B
saved	39,649 B (-13.6%)

If you use one of the nine, your bundle ends up roughly where it was: you are paying for that feature and not for the other eight. If you use none, you get the saving for free.

New in 7.0: a lean baseline for script tags

Tree-shaking only ever helped people with a build step. A page using a <script> tag had exactly one artifact and no way to decline any of it.

7.0 adds apexcharts.core.js: the chart class with no chart types and no optional features, which you then assemble from separate tags.

<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/line.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/features/legend.js"></script>

Script tag	gzip
dist/apexcharts.min.js (everything)	252,005 B
dist/apexcharts.core.min.js (baseline)	136,921 B

This is purely additive. apexcharts.js is unchanged and still batteries-included, and a page that wants everything should keep loading it rather than assembling it from parts. Note the lean core is not as small for a script tag as apexcharts/core is for a bundler: a bundler can drop the internals your app never touches, while a script tag has to keep them, because any add-on loaded later may reach for any of them.

See Tree Shaking for every entry point and what each one costs.

Two smaller breaking changes

plotOptions.bar.borderRadiusWhenStacked is gone

Rounded corners on a stacked bar are no longer a setting. Corner ownership now follows the outer edge of the stack, which is what 'last' was approximating and what 'all' got wrong on any stack whose last series was empty.

The option was there because the rounded cap is a discrete class flip over continuous geometry, and toggling a series used to re-resolve it from the new state while the old bar was still on screen, inverting caps on the departing layer. That is fixed rather than configurable: the mirror is held for the length of the exit tween, and the discriminator now depends on which direction the bar is moving.

Remove it from your config. An unknown option is ignored, so leaving it in place is harmless, but it no longer does anything.

 plotOptions: {
   bar: {
     borderRadius: 4,
-    borderRadiusWhenStacked: 'last',
   },
 }

dataLabels.animate.enabled now defaults to true

Data labels ride to their new position on a data-change update instead of snapping there. Previously off by default.

The bars, the markers and the axis ticks already reflowed on one clock, so a label that jumped to its final slot on the first frame arrived several hundred milliseconds before the bar it belonged to. A label that has not moved is a per-label no-op, so an update that does not reorder costs nothing.

Bar and column charts only. To get the old behaviour back:

dataLabels: {
  animate: { enabled: false },
}

Also in 7.0

Not breaking, but worth knowing about:

• Trellis (small multiples) is new: one dataset split into a grid of pixel-aligned panels sharing scales, legend and toolbar, via trellis: { by: 'region' }. 2-D row × column grids, per-row and per-column scale groups, a grid-wide tooltip, panel promotion, and virtualization for large grids.
• Unit pictograms are drawn rather than fetched: shape: 'pictogram' with a mark from apexcharts/pictograms emits one <path> per unit, which is what lets a glyph crowd scale to thousands of units.
• markers.largeDatasetThreshold batches a series' markers into one path element per size. Opt-in, because it is not pixel-identical where markers overlap. At 2000 points it takes a render from 18ms to 5.8ms.
• tooltip.compact collapses the tooltip to one tight line, for panels a normal card would cover.
• plotOptions.bubble.minZ / maxZ set an explicit z window, so several bubble charts can share one size scale.
• A null-split line now draws as one path element rather than one per segment, which takes a 2000-point series with 1-in-7 nulls from 4.9ms to 3.0ms.
• Logarithmic y-axis geometry is corrected and tickAmount is now honoured on log scales.
• Fixes for tooltip hover targets inside Shadow DOM, stacked baselines on ragged data, and annotations on charts with no resolvable domain.

Upgrading

npm install apexcharts@7

Framework wrappers need no new version. react-apexcharts, vue3-apexcharts, vue-apexcharts and stencil-apexcharts already accept 7.x, and ng-apexcharts@3.1.0 widened its peer range to ^6.0.0 || ^7.0.0. If you are on ng-apexcharts@3.0.0, upgrade it alongside, since its peer range excludes 7.x and npm will report a conflict.