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, which includes every chart type. 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, you can import the core renderer and add only the chart types you need:

import ApexCharts from 'apexcharts/core'
import LineChart from 'apexcharts/src/charts/Line'
import BarChart from 'apexcharts/src/charts/Bar'

ApexCharts.use([LineChart, BarChart])

This keeps unused chart code out of your production bundle. See Tree Shaking for the full list of importable chart modules and bundle size guidance.

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.

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.