React

react-apexstock is a thin, typed React 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 react-apexstock apexstock apexcharts

apexcharts, apexstock, react, and react-dom 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

import { useMemo } from 'react'
import ApexStock from 'react-apexstock'

export function PriceChart({ data }) {
  // Memoize so the chart only updates when inputs actually change.
  const options = useMemo(
    () => ({
      chart: { height: 420 },
      theme: { mode: 'light' },
    }),
    []
  )
  const series = useMemo(() => [{ name: 'Price', data }], [data])

  return <ApexStock options={options} series={series} style={{ width: '100%' }} />
}

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`, handy for frequently-changing data.
`className`	`string`	Class applied to the container element.
`style`	`React.CSSProperties`	Inline styles applied to the container element.

Pass stable / memoized options and series. A new object identity on every render triggers an update(). Keep static config in options and pass changing data through series.

Accessing the instance

The component forwards a ref exposing an imperative handle. getInstance() returns the live ApexStock instance (call any of its methods) or null before mount; getElement() returns the container <div>.

import { useRef } from 'react'
import ApexStock, { type ApexStockRef } from 'react-apexstock'

function Toolbar({ series }) {
  const ref = useRef<ApexStockRef>(null)
  const addRSI = () => ref.current?.getInstance()?.updateIndicator('rsi')

  return (
    <>
      <button onClick={addRSI}>Add RSI</button>
      <ApexStock ref={ref} options={{ chart: { height: 400 }, series }} />
    </>
  )
}

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 effect. The core apexstock package is import-safe in Node, but rendering needs a DOM. No extra guards are required in Next.js or other SSR setups.