Installation
Download
Installing via npm
npm install apexcharts --save
That installs the latest release, 8.x. To stay on 7.x, install apexcharts@7. Upgrading from 7.x? The v8 migration guide lists the imports a page may need to add.
Installing a prerelease
npm i apexcharts@next no longer works, on purpose. As of 7.3, prereleases publish under a tag naming their own release line rather than under a floating next:
npm install apexcharts@rc-8.0 // the 8.0 release candidates
A floating next has to be maintained. The moment a stable ships, it points at something older than latest, and npm i apexcharts@next quietly installs the wrong thing. A tag naming a line never goes stale, because it states a fact rather than a position. apexcharts@next now fails with "No matching version", which is the honest answer and better than an old one. Once a line ships stable, its tag may be removed, as rc-7.4 has been, and installing it then fails the same honest way. Each prerelease's release notes name its exact tag.
Usage
import ApexCharts from 'apexcharts'
OR
Direct <script> include
Another way is to directly include it in your html
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/apexcharts.min.js"></script>
The same file is on cdnjs, which drops the dist/ folder from the path:
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/8.3.1/apexcharts.min.js"></script>
Both serve dist/apexcharts.min.js, the default bundle, from one release. A pinned page keeps working when a new major changes what the default bundle holds, as 8.0 did. The unversioned https://cdn.jsdelivr.net/npm/apexcharts always serves the latest release, the next major included. To keep a page on an older major, pin a release from it.
Either way, some chart types and features are not in the default bundle and take one more import or script tag each. They are listed below.
ES Module Import
import ApexCharts from 'apexcharts' loads the default bundle: the standard chart types and the everyday features. Since 8.0 it no longer has every chart type. Unit, sunburst and violin left it, joining icicle and raincloud, and several features ship outside it too. Each one is a single extra import, listed in the next section.
To take every chart type and feature in one import instead:
import ApexCharts from 'apexcharts/full'
apexcharts/full also registers the unit-shape and pictogram catalogs, so it needs no add-on import. It is the larger download; the script-tag sizes below compare the two.
Going the other way, apexcharts/core is the chart class with no chart types and no features, and you import each one you use. Tree Shaking lists every entry point and what each one costs.
Server rendering takes the same imports next to apexcharts/ssr. See Server side rendering.
Chart types and features that need an explicit import
The default bundle leaves these out, so only the projects that use one pay for it. Each is one line next to the default import:
import ApexCharts from 'apexcharts'
import 'apexcharts/sunburst'
import 'apexcharts/features/waterfall'
Moved out of the default bundle in 8.0:
| Chart type or feature | Import |
|---|---|
| Unit, with waffle and beeswarm | apexcharts/unit |
| Sunburst | apexcharts/sunburst |
| Violin | apexcharts/violin |
| Drilldown | apexcharts/features/drilldown |
| Waterfall | apexcharts/features/waterfall |
| Dumbbell | apexcharts/features/dumbbell |
| Streamgraph | apexcharts/features/streamgraph |
Waterfall, dumbbell and streamgraph draw through renderers the default bundle already has, so next to it they are features: apexcharts/features/waterfall, not apexcharts/waterfall. That second entry is for the lean core, and next to the default bundle it brings a renderer the page already has.
Drilldown is needed only when drilldown.enabled is on. Sunburst and icicle read a drilldown.series block as plain data and need no drilldown import.
Already opt-in before 8.0, and unchanged:
| Chart type or feature | Import |
|---|---|
| Icicle | apexcharts/icicle |
| Raincloud | apexcharts/raincloud |
| Highlight filter | apexcharts/features/highlight-filter |
| Trellis | apexcharts/features/trellis |
| Storyboard | apexcharts/features/storyboard |
| Perspectives | apexcharts/features/perspectives |
| Ink | apexcharts/features/ink |
| Canvas renderer | apexcharts/features/renderer-canvas |
| Linked Views | apexcharts/features/link |
| Measure ruler | apexcharts/features/measure |
| Rewind | apexcharts/features/history |
| Context menu | apexcharts/features/context-menu |
Icicle (added in 7.6), raincloud (7.1) and the highlight filter (7.9) were never in the default bundle. The other nine have been opt-in since 7.0.
Raincloud is apexcharts/raincloud, which brings the violin renderer it draws through as well as its statistics. apexcharts/features/raincloud is the statistics alone: enough next to a 7.x default bundle, which still had violin, but not next to the 8.0 one.
Everything else is in the default bundle. The chart types are line, area, scatter, bubble, range area, bar, column, range bar, candlestick, box plot, histogram, pie, donut, polar area, radial bar, radar, heatmap and treemap, plus funnel and pyramid (drawn as bars) and gauge (drawn as a radial bar). The features are axes, tooltips, legend, toolbar, exports, annotations, keyboard navigation, morph, themes, plugins, custom series, and the statistics that turn raw observations into a histogram or box plot.
You will not have to guess whether you need one. A chart whose type is missing logs one console line naming the import and the script tag, and draws nothing in its place. A feature whose options are set but whose module is missing warns the same way, and the chart draws without it. Waterfall, dumbbell and streamgraph are the exception: without their feature they draw nothing, since their renderer would otherwise draw the values wrong.
Upgrading from 7.x? See the v8 migration guide. From 6.x, start with the v7 migration guide.
CDN Usage
When you include ApexCharts via a <script> tag, the library registers itself as window.ApexCharts. You can use it directly in any inline script or module that runs after the tag.
Here is a minimal HTML page that renders a chart using the CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>ApexCharts CDN Example</title>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/apexcharts.min.js"></script>
<script>
var options = {
chart: { type: 'bar' },
series: [{ name: 'Revenue', data: [44, 55, 57, 56, 61, 58] }],
xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }
}
var chart = new window.ApexCharts(document.querySelector('#chart'), options)
chart.render()
</script>
</body>
</html>
The window. prefix is optional when scripts run at page level, but it makes the global dependency explicit and avoids confusion in bundled code.
Adding opt-in chart types and features
Every item in the tables above except raincloud has its own file under dist/, at the path its import names: apexcharts/sunburst is dist/sunburst.js, and apexcharts/features/waterfall is dist/features/waterfall.js. Add a tag for each one the page uses:
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/apexcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/sunburst.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/features/waterfall.js"></script>
Raincloud is the exception. It draws through the violin renderer, so it takes two files, in this order:
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/apexcharts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/violin.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/features/raincloud.js"></script>
From 8.0 an add-on tag may come before or after the ApexCharts one: an add-on that loads first waits for ApexCharts and registers when it arrives. The add-on files also exist in 7.9.1, and a tag is harmless on a bundle that already has the item, so a 7.x page can add them before it upgrades. On 7.x, put them after the ApexCharts tag.
Or load one file that has every chart type and feature:
<script src="https://cdn.jsdelivr.net/npm/apexcharts@8.3.1/dist/apexcharts.full.min.js"></script>
Every add-on keeps the same path on cdnjs without dist/: https://cdnjs.cloudflare.com/ajax/libs/apexcharts/8.3.1/sunburst.js. Keep every tag on a page at the same version.
A page that loads ApexCharts through RequireJS (AMD) cannot use add-on files, so it should load apexcharts.full.min.js.
Three script-tag baselines
A page without a bundler gets the same choice a bundler build does:
| File | What it has | Gzip |
|---|---|---|
dist/apexcharts.min.js | The default bundle: the standard chart types and everyday features. Add opt-in items as their own tags. | 263,188 B |
dist/apexcharts.full.min.js | Every chart type and feature, and the unit-shape and pictogram catalogs. No add-on needed. | 381,135 B |
dist/apexcharts.core.min.js | The chart class alone, with no chart types and no features. | 157,032 B |
Measured on apexcharts 8.0.0, gzipped with zlib at its default level, which is the figure the library's build prints. The Tree Shaking page measures bundler builds a different way, so its figures do not compare with these.
The lean core renders nothing on its own: add a tag for each chart type and feature the page uses. Features follow their import: apexcharts/features/legend is dist/features/legend.js, and every other apexcharts/features/<name> works the same way except features/all, which has no script-tag file. Tooltips are part of the core and need no file. Chart types do not all follow their import. One file registers a whole family (dist/line.js brings area too, and there is no dist/area.js), and some types need more than one file:
chart.type | Script-tag files |
|---|---|
line, area, scatter, bubble, rangeArea | dist/line.js |
bar, column, rangeBar, funnel, pyramid | dist/bar.js |
candlestick, boxPlot | dist/candlestick.js |
pie, donut, polarArea | dist/pie.js |
radialBar, gauge | dist/radialBar.js |
radar | dist/radar.js |
heatmap | dist/heatmap.js |
treemap | dist/treemap.js |
sunburst | dist/sunburst.js |
icicle | dist/icicle.js |
unit, waffle | dist/unit.js |
histogram | dist/bar.js, dist/features/stats.js |
waterfall | dist/bar.js, dist/features/waterfall.js |
dumbbell | dist/bar.js, dist/features/dumbbell.js |
streamgraph | dist/line.js, dist/features/streamgraph.js |
violin | dist/bar.js, dist/violin.js |
raincloud | dist/bar.js, dist/violin.js, dist/features/raincloud.js |
A boxPlot or violin built from raw observations also takes dist/features/stats.js; one given precomputed values does not. Tree Shaking lists every entry point.
Framework Wrappers
ApexCharts ships official wrappers for the most common JavaScript frameworks. Each wrapper handles lifecycle events (mount, update, destroy) so you do not need to manage the chart instance manually.
| Framework | Package |
|---|---|
| React | npm install react-apexcharts apexcharts |
| Vue 3 | npm install vue3-apexcharts apexcharts |
| Angular | npm install ng-apexcharts apexcharts |
All three accept apexcharts 8. A wrapper draws with the apexcharts package installed next to it, so an opt-in chart type or feature takes the same import line in your app, in the file that renders the chart or one loaded before it:
import 'apexcharts/sunburst'
See Framework Integrations for usage examples and component API details for each wrapper.