Installation & Usage

Download

Installing via npm

npm install apexcharts --save
npm install apexstock --save

apexcharts is a peer dependency, required at ^7.1.0, and it is not bundled. ApexStock reaches it three ways, in this order of preference under a bundler:

import ApexCharts from 'apexcharts'
import ApexStock from 'apexstock'

// 1. Inject it per chart
const chart = new ApexStock(el, options, { ApexCharts })

// 2. Or register it once, app-wide
ApexStock.setApexCharts(ApexCharts)

// 3. Or leave it on the global, as the script-tag convention expects
window.ApexCharts = ApexCharts

The library is import-safe for server-side rendering, but the constructor needs a DOM, so construct on the client only.

Usage

import ApexCharts from 'apexcharts'
import ApexStock from 'apexstock'

// ApexStock calls `new ApexCharts(...)` internally and does not import it,
// so ApexCharts must be available as a global.
window.ApexCharts = ApexCharts

const apexStock = new ApexStock(document.querySelector('#chart'), {
  chart: { height: 500 },
  series: [{ name: 'ACME', data: candles }],
  theme: { mode: 'light' },
})
apexStock.render()

ApexCharts must be available as a global. ApexStock drives ApexCharts through window.ApexCharts rather than importing it, so load ApexCharts first. The chart CSS is injected automatically on import; there is no separate stylesheet to include.

See Creating a Basic Stock Chart for a minimal example and Data Format for the OHLCV candle shape.

Direct <script> include

Another way is to directly include it in your HTML. Load ApexCharts first so the global is present:

<div id="chart"></div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/apexstock/dist/apexstock.min.js"></script>
<script>
  const apexStock = new ApexStock(document.querySelector('#chart'), {
    chart: { height: 500 },
    series: [{ name: 'ACME', data: candles }],
  })
  apexStock.render()
</script>

Framework wrappers

Thin, typed component wrappers ship for the major frameworks. Each wraps the imperative ApexStock class: it creates the instance on mount, forwards prop changes to update(), and tears it down on unmount.

Framework	Package	Guide
React	react-apexstock	React
Vue 3	vue-apexstock	Vue
Angular	ngx-apexstock	Angular

Install a wrapper alongside the core and ApexCharts, for example:

npm install react-apexstock apexstock apexcharts

Licensing

Register your license key once, before any chart renders, with the static setLicense method:

import ApexStock from 'apexstock'

ApexStock.setLicense('APEX-XXXX...')

An invalid, expired, or missing key causes a watermark overlay to be shown on the chart. When using a framework wrapper, call setLicense on the core class at app startup, the wrapper components share the same underlying ApexStock.