Installation & Usage

Download

Installing via npm

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

apexcharts is a peer dependency, required at ^7.1.0 || ^8.0.0, and it is not bundled. ApexCharts 8 needs apexstock 0.5.2 or newer: 0.5.0 and 0.5.1 accept ^7.1.0 only, so npm will not resolve them next to apexcharts@8. The current release, 0.6.0, keeps the same range. ApexStock uses none of the chart types or features that 8.0 moved out of the default ApexCharts bundle, so it needs no add-on import.

The one add-on is opt-in: apexstock/ignite-ui, new in 0.6.0, lets stock charts follow an Ignite UI theme on the page. It imports apexcharts/features/ignite-ui, so it needs ApexCharts 8.8.0 or later; the main apexstock entry keeps the range above. See Using with Ignite UI.

ApexStock reaches ApexCharts 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.

The key is shared by every Apex product on the page, so ApexCharts.setLicense() licenses the stock charts too. Since ApexStock 0.6.0 a later key cannot step the page down a plan: once a valid key is in force, a different valid key whose plan ranks lower (a Pro key after a Premium one) is ignored, with a console warning that names both plans. Keys of the same or a higher plan still replace the one in force, and an invalid or expired key never replaces a valid one. To move to a lower plan on purpose, call ApexStock.setLicense('') first, then set the new key. The guard lives in the shared license manager, which ApexCharts 8.8.0, ApexTree 2.3.0, ApexSankey 1.14.0, ApexGantt 3.20.0, ApexMaps 1.3.0, ApexStock 0.6.0 and apex-grid-enterprise 0.9.0 carry, and it runs in whichever product's setLicense you call, so on a page that mixes releases, set the key once, through one of these.