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/all`	All of the above — convenience import equivalent to the full bundle's feature set

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