Tree Shaking

ApexCharts ships modular entry points so you can import only the chart types and features your application actually uses. This can cut bundle size substantially for apps that don't need the full chart catalogue.

The standard import ApexCharts from 'apexcharts' import continues to work unchanged: all chart types and features are included by default. Tree-shaking is opt-in.

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 Entry Points

Import the entry point that matches the chart.type you use:

apexcharts/line
apexcharts/area
apexcharts/scatter
apexcharts/bubble
apexcharts/rangeArea
apexcharts/bar
apexcharts/column
apexcharts/rangeBar
apexcharts/candlestick
apexcharts/boxPlot
apexcharts/pie
apexcharts/donut
apexcharts/polarArea
apexcharts/radialBar
apexcharts/radar
apexcharts/heatmap
apexcharts/treemap

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
`apexcharts/features/legend`	Legend UI and series toggling
`apexcharts/features/toolbar`	Toolbar and zoom/pan controls (registered together, both are required for zoom and pan to work)
`apexcharts/features/exports`	SVG, PNG, CSV, and JSON export
`apexcharts/features/annotations`	Point, line, and area annotations
`apexcharts/features/keyboard`	Keyboard navigation (accessibility)
`apexcharts/features/drilldown`	Click-to-drill navigation with breadcrumb trail
`apexcharts/features/morph`	Cross-type morph animation when `updateOptions` changes `chart.type`
`apexcharts/features/all`	All of the above, a convenience import equivalent to the full bundle's feature set

Advanced Feature Entry Points (v6)

The advanced features introduced in ApexCharts 6.0 are tree-shakeable too. Some are Premium (marked ), available on the Premium and OEM plans; the rest carry no plan requirement beyond ApexCharts itself. Import only the ones you use:

Import	Feature
`apexcharts/features/weave`	Plugin platform (Weave)
`apexcharts/features/renderer-canvas`	Canvas renderer (Strata)
`apexcharts/features/marks`	Custom series types (Marks)
`apexcharts/features/link`	Linked views & crossfilter
`apexcharts/features/ink`	Annotation authoring (Ink)
`apexcharts/features/measure`	Measure ruler
`apexcharts/features/context-menu`	Context menu (Radial Actions)
`apexcharts/features/storyboard`	Storyboard (scrollytelling) (includes Perspectives)
`apexcharts/features/perspectives`	Shareable view state (Perspectives)
`apexcharts/features/history`	Undo / redo (Rewind)
`apexcharts/features/facet`	Design tokens & OS-aware themes (Facet)

Premium features. The crowned rows (Storyboard, Ink, Measure, Linked Views, Perspectives, Rewind, and the Context Menu) are available on the Premium and OEM plans. They ship in the same apexcharts package as opt-in imports, so the crown marks a plan requirement, not a separate install or a runtime key. Weave, Strata, Marks, and Facet carry no such requirement.

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()

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()

Full Bundle (Default Behaviour)

If you import from apexcharts directly (no sub-path), you get the full bundle (every chart type and every feature) exactly as before. No migration required.

// Full bundle — unchanged from previous versions
import ApexCharts from 'apexcharts'

const chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

Advanced: Registering Chart Types Programmatically

You can also call ApexCharts.use() and ApexCharts.registerFeatures() directly if you need to register types or features at runtime rather than at module load time.

import ApexCharts from 'apexcharts/core'
import Line from 'apexcharts/src/charts/Line'
import Legend from 'apexcharts/src/modules/legend/Legend'

// Register chart types
ApexCharts.use({ line: Line, area: Line })

// Register features
ApexCharts.registerFeatures({ legend: Legend })