Installation

Download

Installing via npm

npm install apexcharts --save

Usage

import ApexCharts from 'apexcharts'

Direct <script> include

Another way is to directly include it in your html

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

ES Module Import

The default import (import ApexCharts from 'apexcharts') loads the full bundle: every chart type, and every feature except the nine listed below. This is the simplest option and works well for most projects.

If your build tool supports tree-shaking and you only use a few chart types, import the core renderer and then one sub-path entry point per chart type you need:

import ApexCharts from 'apexcharts/core'
import 'apexcharts/line'   // registers line, area, scatter, bubble, rangeArea
import 'apexcharts/bar'    // registers bar, column, rangeBar

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

Each chart-type import is side-effecting: it registers its types on the ApexCharts class you imported from apexcharts/core, so there is nothing to name and nothing to pass along. On apexcharts 7.0.0 that pair costs about 160 KB gzipped against 257 KB for the full bundle.

See Tree Shaking for every entry point, the chart types each one registers, and what each one costs.

Features that need an explicit import

Since 7.0, nine optional features are not in the default bundle. Importing apexcharts gives you everything else; these nine cost one extra line each, and only the projects that use them pay for them.

import ApexCharts from 'apexcharts'
import 'apexcharts/features/trellis'

Trellis, Storyboard, Perspectives, Ink, the canvas renderer, Linked Views, the measure ruler, Rewind and the context menu.

You will not have to guess whether you need one: if the configuration for a feature is present but the feature is not, ApexCharts warns in the console and names both ways to add it. Upgrading from 6.x? See the v7 migration guide.

Everything else stays in the default bundle, including all chart types, axes, tooltips, legend, toolbar, exports, annotations, keyboard navigation, morph, drilldown, themes, plugins and custom series.

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"></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.

Loading only what you use, without a bundler

Tree-shaking only ever helped people with a build step: a page using a <script> tag had one artifact and no way to decline any of it. Since 7.0 there is a second option. apexcharts.core.js is the chart class with no chart types and no optional features, and you add the pieces you need as further tags:

<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/line.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/features/legend.js"></script>

Script tag	Gzip
`dist/apexcharts.min.js` (everything)	252,005 B
`dist/apexcharts.core.min.js` (baseline, add your own types)	136,921 B

On its own the lean core renders nothing, which is the point: load a chart-type tag for each chart.type you use. Ask for a type you have not loaded and it says so, naming both routes, rather than failing silently.

This is additive. apexcharts.js is unchanged and still includes everything, so a page that wants all of it should keep loading that rather than assembling it from parts.

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`

See Framework Integrations for usage examples and component API details for each wrapper.