Installation & Usage

Download

Installing via npm

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

apexcharts is a peer dependency; install it alongside apexstock.

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

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.