Features
Feature-level tree-shaking
ApexCharts now 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.
// Minimal custom bundle — only what you need
import ApexCharts from 'apexcharts/core'
import 'apexcharts/line' // line / area / scatter
import 'apexcharts/features/legend' // optional legendChart-type entry points
| Import | Chart types |
|---|---|
apexcharts/line
| line, area, scatter, bubble |
apexcharts/bar
| bar, column |
apexcharts/pie
| pie, donut |
apexcharts/radial
| radialBar |
apexcharts/candlestick
| candlestick |
apexcharts/heatmap
| heatmap |
apexcharts/treemap
| treemap |
apexcharts/rangearea
| rangeArea, rangeBar |
apexcharts/boxplot
| boxPlot |
apexcharts/funnel
| funnel |
apexcharts/radar
| radar |
Feature entry points
| Import | Feature |
|---|---|
apexcharts/features/legend
| Legend |
apexcharts/features/toolbar
| Toolbar / zoom controls |
apexcharts/features/exports
| SVG / PNG / CSV / JSON export |
apexcharts/features/annotations
| Point, line, and area annotations |
apexcharts/features/keyboard
| Keyboard navigation (accessibility) |
The standard import ApexCharts from 'apexcharts' import continues to work
unchanged — all chart types and features are included by default.
Keyboard navigation
Charts are now keyboard-accessible. After focusing a chart (tab or click), users
can navigate between data points using the arrow keys. The tooltip and active
marker update as focus moves between points. This meets WCAG 2.1 AA keyboard
interaction requirements.
Enable via the optional feature entry point:
import 'apexcharts/features/keyboard'Keyboard navigation is included automatically in the full bundle.
Server-side rendering (SSR)
SSRRenderer.renderToString(config) and SSRRenderer.renderToHTML(config) now
work in Node.js without a browser DOM. Useful for generating static SVG images,
pre-rendering chart HTML for emails, or server-driven PDF pipelines.
import SSRRenderer from 'apexcharts/ssr'
const svg = await SSRRenderer.renderToString({
chart: { type: 'line', width: 600, height: 350 },
series: [{ name: 'Sales', data: [10, 41, 35, 51, 49, 62] }],
})
// svg is a self-contained SVG string — no window or document requiredInternal / Architecture
These changes are transparent to users but lay the groundwork for future
performance and bundle-size improvements.
- Modules decoupled from the chart context service-locator (
ctx) pattern —
required to make tree-shaking work correctly at the module level. - Replaced legacy ES5 polyfills with native ES6+ equivalents.
- Removed bare
window/document/navigatoraccesses throughout the
source; all browser API calls now go through SSR-safe wrappers.