Migrating to v8
ApexCharts 8.0 takes three chart types and four features out of the default bundle, so most pages download less. A page that draws one of them needs one more import or script tag. If your charts use none of them, and draw no raincloud, there is nothing to change.
Coming from 6.x? Start with the v7 migration guide.
What moved
| Moved out | Bundler | Script tag |
|---|---|---|
| Unit, with waffle and beeswarm | apexcharts/unit | dist/unit.js |
| Sunburst | apexcharts/sunburst | dist/sunburst.js |
| Violin | apexcharts/violin | dist/violin.js |
| Drilldown | apexcharts/features/drilldown | dist/features/drilldown.js |
| Waterfall | apexcharts/features/waterfall | dist/features/waterfall.js |
| Dumbbell | apexcharts/features/dumbbell | dist/features/dumbbell.js |
| Streamgraph | apexcharts/features/streamgraph | dist/features/streamgraph.js |
Drilldown counts only when drilldown.enabled is on. Sunburst and icicle read a drilldown.series block as plain data and need no drilldown feature.
Icicle and raincloud were already separate imports, as were opt-in features such as trellis and storyboard. The one that changes is raincloud, below.
Add the import
With a bundler, add the line next to the default import. Each one registers itself on the ApexCharts class, so there is nothing to name or pass along:
import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'
import 'apexcharts/features/waterfall'
With script tags, add the file:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/sunburst.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/features/waterfall.js"></script>
From 8.0 an add-on tag may come before or after the ApexCharts one: an add-on that loads first waits, and registers when ApexCharts arrives. Before 8.0 it had to come after.
Raincloud needs the violin renderer
Raincloud draws through the violin renderer, which is no longer in the default bundle, so a script-tag page loads violin.js first:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/violin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/features/raincloud.js"></script>
In a bundler, import 'apexcharts/raincloud' brings both and works as before. If you followed the 7.x advice and import apexcharts/features/raincloud next to apexcharts, change it to import 'apexcharts/raincloud': in 8.0 the feature alone has no violin renderer to draw through.
Waterfall, dumbbell and streamgraph: import the feature
Next to the default bundle, import apexcharts/features/waterfall, not apexcharts/waterfall. These three draw through renderers the default bundle already has (bar and range area). What it lacks is the feature that turns your values into what the renderer draws.
apexcharts/waterfall is the entry for the lean core. It brings the renderer as well as the feature, so next to the default bundle it ships a second copy of a renderer you already have. The same goes for apexcharts/dumbbell and apexcharts/streamgraph.
Or load everything
New in 8.0, one bundle has every chart type and feature, plus the unit-shape and pictogram catalogs, so no add-on is needed:
import ApexCharts from 'apexcharts/full'
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.full.min.js"></script>
It is the larger download; see Bundle size.
Building on the lean core
If you assemble charts from apexcharts/core, two more things apply:
- Violin and raincloud draw through the bar renderer, so they also need
apexcharts/bar. - A boxPlot or violin built from raw observations needs
apexcharts/features/stats, which turns the samples into the summary and density the chart draws. The default bundle has it; the lean core does not. Without it, 8.0 says so in the console.
import ApexCharts from 'apexcharts/core'
import 'apexcharts/bar'
import 'apexcharts/violin'
import 'apexcharts/features/stats' // only for raw observations
RequireJS and AMD pages
An add-on cannot register on a page that loads ApexCharts through RequireJS or another AMD loader. Load apexcharts.full.min.js there instead, which needs no add-on.
Server rendering
apexcharts/ssr takes the same imports:
import ApexCharts from 'apexcharts/ssr'
import 'apexcharts/sunburst'
See Server side rendering for the rest of the setup.
When something is missing
The console names the line to add. A chart type that is not loaded logs one error and draws nothing in its place:
ApexCharts: chart type "sunburst" is not registered. Bundler: import
'apexcharts/sunburst' (or import ApexCharts from 'apexcharts/full'). Script
tag: add <script src=".../dist/sunburst.js"> after the ApexCharts script, or
load apexcharts.full.min.js instead, which has every type. This type is not
in the default apexcharts.min.js.
A missing feature logs a warning of the same shape:
ApexCharts: `drilldown` requires the drilldown feature, which is not in this
bundle. Bundler: import 'apexcharts/features/drilldown'. Script tag: add
<script src='.../dist/features/drilldown.js'> after the ApexCharts script, or
load apexcharts.full.min.js instead.
Without drilldown, the chart draws its top level and a click does not drill. A waterfall, dumbbell or streamgraph without its feature draws nothing, since its renderer would otherwise draw the values wrong.
Bundle size
| File | 7.9.1 | 8.0.0 |
|---|---|---|
apexcharts.min.js (default) | 291,763 B | 263,188 B |
apexcharts.full.min.js | not shipped | 381,135 B |
The default bundle is 28,575 B (9.8%) smaller than in 7.9.1. These are gzipped bytes at zlib's default level, the way the library's release notes measure. The tree-shaking guide measures differently (an esbuild bundle, then gzip -9), so compare figures within one page, not across the two. It also lists every entry point.
Staying on 7
An unversioned jsDelivr URL (https://cdn.jsdelivr.net/npm/apexcharts) serves 8.0 now. If a page loads it and draws one of the seven items above, or a raincloud, pin the 7 channel:
<script src="https://cdn.jsdelivr.net/npm/apexcharts@7"></script>
Or add the add-on tags now. The files also exist in 7.9.1, and a tag for an item the bundle already has does no harm, so a page can carry them before it upgrades. On 7.x, put them after the ApexCharts tag.
With npm, keep the range on 7 in package.json:
"apexcharts": "^7"
Upgrading
npm install apexcharts@8
Framework wrappers: react-apexcharts, vue3-apexcharts, vue-apexcharts and stencil-apexcharts already accept 8.x. ng-apexcharts accepts it from 3.2.0, and 3.1.0 stops at 7.x, so upgrade it alongside. For server rendering with vue3-apexcharts, use 1.11.2 or later: 1.11.1 rendered on the server with its own copy of ApexCharts 5.10.0, whatever version you had installed.