Tree Shaking
ApexCharts ships modular entry points so you can import only the chart types and features your application actually uses. A line chart built this way weighs 164.8 KB gzipped, against 266.0 KB for the default bundle and 399.8 KB for the full bundle.
import ApexCharts from 'apexcharts' is the default bundle: the standard chart types and the everyday features. Five chart types and fourteen features live outside it, and each needs one extra import. 8.0 moved out three types (unit, sunburst, violin) and four features (drilldown, waterfall, dumbbell, streamgraph), 7.0 moved out nine advanced features, and raincloud, icicle and the highlight filter were never in it. import ApexCharts from 'apexcharts/full', new in 8.0, has all nineteen. The last column of each entry-point table below marks which is which. Tree-shaking beyond that is opt-in, so if you import from apexcharts and use none of the nineteen, there is nothing to do.
How It Works
ApexCharts uses a registry-based architecture. The core library ships without any chart renderer. Chart-type entry points and feature entry points call ApexCharts.use() and ApexCharts.registerFeatures() respectively to register only what you import.
// Minimal custom bundle: only what you need
import ApexCharts from 'apexcharts/core'
import 'apexcharts/line' // registers: line, area, scatter, bubble, rangeArea
import 'apexcharts/features/legend' // optional legend UI
const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Chart-type and feature entry points are side-effecting: importing one registers what it carries on the shared ApexCharts class. That is why import 'apexcharts/line' binds no name and why you never call ApexCharts.use() yourself.
What It Saves
| What you import | Gzip |
|---|---|
from 'apexcharts/full' (the full bundle: every chart type and feature) | 399.8 KB |
from 'apexcharts' (the default: every type but the five opt-in ones, every feature but the fourteen opt-in ones) | 266.0 KB |
apexcharts/core alone (no chart types) | 154.0 KB |
core + line | 164.8 KB |
core + bar + legend | 182.2 KB |
core + line + legend + toolbar + exports | 193.0 KB |
Measured on apexcharts 8.0.0 with esbuild 0.25.12: each entry bundled with esbuild --bundle --minify --format=iife --target=es2018, then gzipped at level 9 with Node's zlib (zlib.gzipSync(buf, { level: 9 })). The gzip -9 command-line tool compresses differently and comes out a few hundred bytes smaller on the same output. Your own figures will differ a little with a different bundler, target, compression level, or gzip implementation; the ratios hold. The per-entry-point costs in the tables below are measured the same way, as the increase over apexcharts/core on its own.
These are not the sizes in the 8.0.0 release notes, which gzip the prebuilt script-tag files at zlib's default level instead: 263,188 B for apexcharts.min.js and 381,135 B for apexcharts.full.min.js. Different files and a different compression level, so compare figures only within one basis.
Measured the same way on 7.9.1, the default bundle was 295.9 KB. 8.0 takes it to 266.0 KB, 29.9 KB (10.1%) less, because three chart types and four features left it. apexcharts/core grew 0.8 KB over the same step, so a build assembled from core costs about what it did.
Note that apexcharts/core is the floor, not zero. It carries the scales, axes, grid, data parsing, SVG layer, tooltip, and animation engine that every chart type draws through, so the saving comes from the types and features you leave out, not from core itself.
Chart-Type Entry Points
Import the entry point that matches the chart.type you use. One entry point often registers several related types, because they share a renderer.
The last column says whether the default bundle already has it. Not in default (8.0) means 8.0 moved it out, covered in the v8 migration guide, and Not in default (7.0) means 7.0 did, covered in the v7 migration guide. Never in default means it was always an explicit import, so there is nothing to migrate. An Included entry matters only if you are assembling from apexcharts/core.
| Import | Registers | Adds to core | In default bundle? |
|---|---|---|---|
apexcharts/line | line, area, scatter, bubble, rangeArea | +10.8 KB | Included |
apexcharts/area | Alias for apexcharts/line, same five types | +10.8 KB | Included |
apexcharts/scatter | Alias for apexcharts/line, same five types | +10.8 KB | Included |
apexcharts/bubble | Alias for apexcharts/line, same five types | +10.8 KB | Included |
apexcharts/rangeArea | Alias for apexcharts/line, same five types | +10.8 KB | Included |
apexcharts/bar | bar, column, rangeBar | +18.6 KB | Included |
apexcharts/column | Alias for apexcharts/bar, same three types | +18.6 KB | Included |
apexcharts/rangeBar | Alias for apexcharts/bar, same three types | +18.6 KB | Included |
apexcharts/streamgraph | streamgraph, plus everything apexcharts/line registers. A streamgraph band draws through the range-area renderer, so this entry point carries that renderer and the baseline arithmetic together. It is for the lean core: next to the default bundle, import apexcharts/features/streamgraph instead | +14.9 KB | Not in default (8.0) |
apexcharts/waterfall | waterfall, plus everything apexcharts/bar registers. A waterfall bar draws through the range-column renderer, so this entry point carries that renderer, the accumulation and the connectors. It is for the lean core: next to the default bundle, import apexcharts/features/waterfall instead | +19.8 KB | Not in default (8.0) |
apexcharts/dumbbell | dumbbell, plus everything apexcharts/bar registers. A dumbbell draws through the range-bar renderer, so this entry point carries that renderer and the endpoint merge. It is for the lean core: next to the default bundle, import apexcharts/features/dumbbell instead | +19.4 KB | Not in default (8.0) |
apexcharts/histogram | Everything apexcharts/bar registers, plus the stats feature. histogram draws through the bar renderer and cannot bin its sample without stats, so this entry point carries both | +21.8 KB | Included |
apexcharts/candlestick | candlestick, boxPlot | +18.2 KB | Included |
apexcharts/boxPlot | Alias for apexcharts/candlestick, both types | +18.2 KB | Included |
apexcharts/violin | violin. It draws through the bar renderer without carrying one, so on the lean core it also needs apexcharts/bar | +5.1 KB | Not in default (8.0) |
apexcharts/raincloud | raincloud , plus violin. A raincloud draws through the violin renderer, so this entry point carries that renderer and the statistics transform. Like violin, on the lean core it also needs apexcharts/bar | +6.5 KB | Never in default |
apexcharts/pie | pie, donut, polarArea | +8.1 KB | Included |
apexcharts/donut | Alias for apexcharts/pie, same three types | +8.1 KB | Included |
apexcharts/polarArea | Alias for apexcharts/pie, same three types | +8.1 KB | Included |
apexcharts/radialBar | radialBar | +12.2 KB | Included |
apexcharts/radar | radar | +3.4 KB | Included |
apexcharts/heatmap | heatmap | +3.2 KB | Included |
apexcharts/treemap | treemap | +13.0 KB | Included |
apexcharts/sunburst | sunburst | +5.6 KB | Not in default (8.0) |
apexcharts/icicle | icicle. The icicle is the sunburst's layout in cartesian coordinates and shares its partition arithmetic | +6.0 KB | Never in default |
apexcharts/unit | unit , which the waffle alias and the beeswarm layout also draw through | +14.8 KB | Not in default (8.0) |
Types that render through another type's engine. A few chart.type values are presets over a base renderer, so the entry point you import is the base one: funnel and pyramid need apexcharts/bar, gauge needs apexcharts/radialBar, and waffle needs apexcharts/unit. histogram, streamgraph, waterfall, dumbbell and raincloud are the same idea, but each also needs a feature module on top of its base renderer, which is why each has its own entry point above.
Violin and raincloud on the lean core. Both draw through the bar renderer, and since 8.0 neither entry point carries one: the default bundle already has it, so apexcharts/violin or apexcharts/raincloud is the only import there. Assembling from apexcharts/core, add apexcharts/bar yourself, or the first violin fails with an error naming the bar import:
import ApexCharts from 'apexcharts/core'
import 'apexcharts/bar' // the renderer violin and raincloud draw through
import 'apexcharts/violin'
import 'apexcharts/features/stats' // only for a violin built from raw observations
apexcharts/waterfall or apexcharts/features/waterfall? Waterfall, dumbbell and streamgraph each have two entry points. apexcharts/features/waterfall is the feature alone: the accumulation and the connectors. apexcharts/waterfall is that feature plus the bar renderer a waterfall draws through, for the lean core, where nothing else supplies one. Next to the default bundle, import the feature. Each entry point is its own build that shares only apexcharts/core, so apexcharts/waterfall there brings a second copy of a bar renderer the default bundle already has. Measured over the default bundle, apexcharts/features/waterfall adds 1.6 KB and apexcharts/waterfall adds 19.6 KB. Dumbbell is the same (1.1 KB against 19.2 KB), and so is streamgraph, whose entry point brings a second line renderer (4.4 KB against 14.7 KB).
// Next to the default bundle, which already has the bar renderer
import ApexCharts from 'apexcharts'
import 'apexcharts/features/waterfall'
// On the lean core, where nothing else brings one
import ApexCharts from 'apexcharts/core'
import 'apexcharts/waterfall'
Unit shapes. The shape pack for the unit chart's layout: 'custom' is a separate entry point with ordinary named exports rather than a side-effecting registration:
import ApexCharts from 'apexcharts/core'
import 'apexcharts/unit'
import { heart } from 'apexcharts/unit-shapes'
// plotOptions: { unit: { layout: 'custom', positions: heart } }
Shapes tree-shake individually: one shape adds about 3.7 KB on top of apexcharts/unit, importing all of them adds 10.8 KB.
Server rendering. apexcharts/ssr renders on the server and hydrates in the browser, covered in Server-Side Rendering. In the browser it carries its own copy of the core, so next to apexcharts or an opt-in add-on it ships a second one. apexcharts/client is the browser build of the default bundle and has no SSR or hydration methods. An opt-in type or feature takes the same import next to apexcharts/ssr.
Feature Entry Points
Optional features like the legend, toolbar, and exports are also tree-shakeable. Import only the features you need. Tooltip is always part of core and does not need to be imported separately.
| Import | Feature | Adds to core | In default bundle? |
|---|---|---|---|
apexcharts/features/legend | Legend UI and series toggling | +9.6 KB | Included |
apexcharts/features/toolbar | Toolbar and zoom/pan controls (registered together, both are required for zoom and pan to work) | +14.0 KB | Included |
apexcharts/features/exports | SVG, PNG, CSV, and JSON export | +4.5 KB | Included |
apexcharts/features/annotations | Point, line, and area annotations | +4.8 KB | Included |
apexcharts/features/keyboard | Keyboard navigation (accessibility) | +5.8 KB | Included |
apexcharts/features/drilldown | Click-to-drill navigation with breadcrumb trail. Needed only when drilldown.enabled is on: a sunburst or icicle reads a drilldown.series block as plain data without it | +5.1 KB | Not in default (8.0) |
apexcharts/features/morph | Cross-type morph animation when updateOptions changes chart.type | +8.5 KB | Included |
apexcharts/features/stats | Binning and summary statistics from raw observations: required by histogram, and optional for boxPlot and violin, which otherwise expect a precomputed summary or density and warn in the console when given raw observations without it | +3.6 KB | Included |
apexcharts/features/streamgraph | The wiggle baseline, band ordering and in-band labels for chart.type: 'streamgraph'. Needs a line/area renderer alongside it, which the default bundle has | +4.5 KB | Not in default (8.0) |
apexcharts/features/waterfall | The delta-to-running-total accumulation and the connectors for chart.type: 'waterfall'. Needs a bar renderer alongside it, which the default bundle has | +1.6 KB | Not in default (8.0) |
apexcharts/features/dumbbell | The endpoint merge for chart.type: 'dumbbell'. Needs a bar renderer alongside it, which the default bundle has | +1.1 KB | Not in default (8.0) |
apexcharts/features/all | The default bundle's feature set in one import: legend, toolbar, exports, annotations, keyboard, morph and stats from this table, plus Weave, Marks and Facet from the next one. Since 8.0 it leaves out drilldown, streamgraph, waterfall and dumbbell | +52.0 KB | Included |
Advanced Feature Entry Points
The advanced features introduced in ApexCharts 6.0 are tree-shakeable too, and since 7.0 most of them are outside the default bundle. The last column reads as in the tables above.
The crown is a separate axis: it marks a plan requirement, not an import. A feature can be crowned, opt-in, both, or neither.
| Import | Feature | Adds to core | In default bundle? |
|---|---|---|---|
apexcharts/features/trellis | Trellis (small multiples) | +27.3 KB | Not in default (7.0) |
apexcharts/features/raincloud | Raincloud statistics , alone, for a page that already has violin. apexcharts/raincloud brings the violin renderer with them | +1.4 KB | Never in default |
apexcharts/features/highlight-filter | Highlight filter | +28.4 KB | Never in default |
apexcharts/features/storyboard | Storyboard (scrollytelling) (includes Perspectives) | +7.2 KB | Not in default (7.0) |
apexcharts/features/perspectives | Shareable view state (Perspectives) | +6.1 KB | Not in default (7.0) |
apexcharts/features/ink | Annotation authoring (Ink) | +5.5 KB | Not in default (7.0) |
apexcharts/features/renderer-canvas | Canvas renderer (Strata) | +7.4 KB | Not in default (7.0) |
apexcharts/features/link | Linked views & crossfilter | +4.7 KB | Not in default (7.0) |
apexcharts/features/measure | Measure ruler | +4.0 KB | Not in default (7.0) |
apexcharts/features/history | Undo / redo (Rewind) | +2.5 KB | Not in default (7.0) |
apexcharts/features/context-menu | Context menu (Radial Actions) | +1.7 KB | Not in default (7.0) |
apexcharts/features/weave | Plugin platform (Weave) | +5.2 KB | Included |
apexcharts/features/marks | Custom series types (Marks) | +1.3 KB | Included |
apexcharts/features/facet | Design tokens & OS-aware themes (Facet) | +0.5 KB | Included |
Storyboard's beats are Perspectives tokens, so features/storyboard pulls features/perspectives in with it. That is why its 7.2 KB is barely more than the 6.1 KB Perspectives costs on its own. Import one or the other, not both: Storyboard already registers Perspectives, so adding features/perspectives as well ships a second copy of it (8.2 KB for the pair against 7.2 KB for Storyboard alone).
Nothing fails silently. If a feature's configuration is present but the feature is not, ApexCharts warns in the console and names both the bundler import and the script tag. Where a chart can still draw without it, it does and says what it did instead: a trellis renders as a single chart, renderer: 'canvas' falls back to SVG, and a chart with drilldown.enabled draws its root level without navigation. A chart whose type is not registered, or a waterfall, dumbbell or streamgraph without its feature, logs one console line naming the import and draws nothing, rather than a chart that looks right and is not.
Premium features. The crowned rows are available on the Premium plan and above, as are the two crowned chart types in the table above: unit, which waffle also renders through, and raincloud, added in 7.1. They ship in the same apexcharts package, so the crown marks a plan requirement, not a separate install. Weave, Strata, Marks, and Facet carry no such requirement, and neither does any other chart type.
Always on, no import needed. Some 6.0 capabilities live in core and have no feature entry point: pluggable easing (Cadence), real-time streaming, coherent data transitions, and mobile gestures (Momentum). Do not try to import apexcharts/features/streaming (or cadence / momentum), those entry points do not exist.
Example: Line Chart with Legend Only
import ApexCharts from 'apexcharts/core'
import 'apexcharts/line'
import 'apexcharts/features/legend'
const chart = new ApexCharts(document.querySelector('#chart'), {
chart: { type: 'line' },
series: [
{ name: 'Revenue', data: [30, 40, 35, 50, 49, 60, 70] },
{ name: 'Costs', data: [20, 25, 28, 35, 40, 45, 50] }
],
xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'] }
})
chart.render()
Example: Bar Chart with Toolbar and Exports
import ApexCharts from 'apexcharts/core'
import 'apexcharts/bar'
import 'apexcharts/features/toolbar' // also registers zoom/pan
import 'apexcharts/features/exports'
const chart = new ApexCharts(document.querySelector('#chart'), {
chart: { type: 'bar' },
series: [{ name: 'Sales', data: [44, 55, 41, 67, 22, 43] }],
xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }
})
chart.render()
Example: Multiple Chart Types in One App
import ApexCharts from 'apexcharts/core'
// Only import what your app actually uses
import 'apexcharts/line'
import 'apexcharts/bar'
import 'apexcharts/pie'
// Only the features you need
import 'apexcharts/features/legend'
import 'apexcharts/features/toolbar'
// Now render any of the imported types
const lineChart = new ApexCharts(document.querySelector('#line'), {
chart: { type: 'line' },
series: [{ data: [10, 41, 35, 51, 49, 62, 69] }]
})
const barChart = new ApexCharts(document.querySelector('#bar'), {
chart: { type: 'bar' },
series: [{ data: [44, 55, 57, 56, 61, 58] }]
})
const pieChart = new ApexCharts(document.querySelector('#pie'), {
chart: { type: 'pie' },
series: [44, 55, 41, 17]
})
lineChart.render()
barChart.render()
pieChart.render()
Default Bundle
If you import from apexcharts directly (no sub-path), you get every entry marked Included above: every chart type but unit, sunburst, violin, icicle and raincloud, and every feature but the fourteen opt-in ones. Three of those features are what waterfall, dumbbell and streamgraph need on top of their renderer, so those three types draw only once you add their feature.
// Default bundle: every chart type but unit, sunburst, violin, icicle
// and raincloud; every feature but the fourteen opt-in ones (waterfall,
// dumbbell and streamgraph charts need their feature added)
import ApexCharts from 'apexcharts'
const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
Adding one back is a single side-effecting import next to it, and the two compose: the add-on resolves against the same core the default bundle already loaded, so you pay for the addition and not for a second copy of the library. A chart type is apexcharts/<type> and a feature is apexcharts/features/<name>:
import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'
import 'apexcharts/features/waterfall'
import 'apexcharts/features/trellis'
Import only what the default bundle lacks. An entry point it already has is a second copy, not a no-op: apexcharts/features/legend next to apexcharts adds 9.4 KB and gains nothing. That is the same reason the feature, not the entry point, is the import for waterfall, dumbbell and streamgraph here.
Without a bundler the same three choices are files: apexcharts.min.js is the default bundle, apexcharts.core.min.js the lean core, and apexcharts.full.min.js everything. An opt-in type or feature is its own file under dist/:
<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>
Raincloud takes two files, dist/violin.js and then dist/features/raincloud.js. On apexcharts.core.min.js, a violin or raincloud page also loads dist/bar.js, as the bundler build adds apexcharts/bar. Since 8.0 an add-on tag may come before or after the ApexCharts one. A RequireJS (AMD) page cannot load add-ons, so it should load apexcharts.full.min.js.
Upgrading from 7.x, where unit, sunburst, violin and the drilldown, waterfall, dumbbell and streamgraph features were in the default bundle, is covered in the v8 migration guide. From 6.x, where eight of the nine features 7.0 made opt-in were in it too (trellis arrived in 7.0 already opt-in), start with the v7 migration guide.
Full Bundle
apexcharts/full, new in 8.0, is the default bundle plus every chart type and feature outside it, and the unit-shape and pictogram catalogs registered by name. Nothing needs an add-on. It measures 399.8 KB on the basis above, against 266.0 KB for the default bundle.
// Full bundle: every chart type and feature, no add-on needed
import ApexCharts from 'apexcharts/full'
const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
In a bundler it is built on top of apexcharts, so an app that imports both, as the React, Vue 3, Angular and Stencil wrappers import apexcharts, carries the default bundle once: the two together measure the same as apexcharts/full alone. From a script tag it is apexcharts.full.min.js. The crowned types and features are in it too; loading them this way does not change what your plan covers. The Vue 2 wrapper vue-apexcharts loads the prebuilt apexcharts/dist/apexcharts.min.js instead, so next to it apexcharts/full is a second copy of the library.
Adding a Type of Your Own
Every built-in type and every feature already has a sub-path entry point, so there is nothing to register by hand: the imports above are the supported way in, and they are the only way that keeps a slim bundle slim.
For a type ApexCharts does not ship, use Marks. You write a renderItem function that draws one datum and register it under a name of your own, which then behaves like a built-in:
import ApexCharts from 'apexcharts/core'
import 'apexcharts/features/marks'
ApexCharts.registerSeriesType('lollipop', {
renderItem(ctx) {
const { x, y, scales, api, color } = ctx
api.line({ x1: x, y1: scales.y(0), x2: x, y2: y, stroke: color, width: 2 })
api.circle({ cx: x, cy: y, r: 6, fill: color })
},
})
The lower-level ApexCharts.use() and ApexCharts.registerFeatures() are what the entry points above call internally. Both take an object keyed by name, never an array: ApexCharts.use({ line: Line, area: Line }) registers the types line and area, while passing an array registers the keys "0" and "1" and rendering then fails with chart type "line" is not registered.
Do not reach into apexcharts/src/... to get those constructors. Raw source bypasses the shared-module contract that apexcharts/core and the sub-path builds are compiled against, so your bundle ends up with a second copy of Graphics, Fill, Animations, and everything else they share. Measured on 8.0.0, core plus a referenced src/charts/Line.js is 194 KB gzipped against 165 KB for core plus apexcharts/line, and core plus src/modules/legend/Legend.js is 200 KB against 164 KB for core plus apexcharts/features/legend. It costs size rather than saving it.
A deep import that is never referenced looks free, and is not: import 'apexcharts/src/charts/Line.js' on its own has no side effects, so a bundler drops it and the type is simply never registered. The chart then fails at render with chart type "line" is not registered, which reads like a bug in the library rather than a consequence of the import.