Vue

vue-apexstock is a thin, typed Vue 3 component around the imperative ApexStock class. It creates the instance on mount, forwards prop changes to update(), and tears it down on unmount.

Installation

npm install vue-apexstock apexstock apexcharts

apexcharts, apexstock, and vue (3.x) are peer dependencies. ApexCharts must be available as a global, the same way the core library expects. This wrapper (0.2.1) targets apexstock 0.3.0 and above.

Usage

<script setup>
import { ref } from 'vue'
import ApexStock from 'vue-apexstock'

const options = { chart: { height: 420 }, theme: { mode: 'light' } }
// A new array identity on data change triggers an update.
const series = ref([{ name: 'Price', data: [] }])
</script>

<template>
  <ApexStock :options="options" :series="series" style="width: 100%" />
</template>

OHLC points use the ApexStock shape { x, y: [open, high, low, close], v }, see Data Format.

Props

Prop	Type	Description
options	StockChartOptions	Full chart options (the 2nd argument to new ApexStock). Required.
series	StockChartOptions["series"]	Convenience: overrides options.series.

Updates fire when the options or series identity changes (assign a new object/array). In-place mutation of the same object is intentionally not deep-watched, to avoid the cost of deep-watching large datasets.

Accessing the instance

Put a ref on the component. getInstance() returns the live ApexStock instance (call any method) or null before mount; getElement() returns the container <div>.

<script setup>
import { ref } from 'vue'
import ApexStock from 'vue-apexstock'

const chart = ref()
const addRSI = () => chart.value?.getInstance()?.updateIndicator('rsi')
</script>

<template>
  <button @click="addRSI">Add RSI</button>
  <ApexStock ref="chart" :options="{ chart: { height: 400 }, series }" />
</template>

Through the instance you can reach the full core API: indicators, trading overlays, streaming, theme switching, and export.

Server-side rendering

The component renders only a container <div> on the server; the chart is created in a client-only onMounted hook. The core apexstock package is import-safe in Node, but rendering needs a DOM.

Licensing

Register your license key once, before charts render, with the core class. See Installation & Usage.