react-apexstock

React component wrapper for ApexStock — financial charting (candlesticks, indicators, drawing tools) built on top of ApexCharts.

It's a thin, typed wrapper around the imperative ApexStock class: it creates the instance on mount, forwards prop changes to update(), and tears it down on unmount.

Install

npm install react-apexstock apexstock apexcharts

apexcharts, apexstock, react, and react-dom are peer dependencies. Provide ApexCharts either as a global (window.ApexCharts) or, in a bundler app, via the apexCharts prop below (no need to touch window).

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 }.

Props

| Prop | Type | Description | | --- | --- | --- | | options | StockChartOptions | Full chart options (the 2nd arg to new ApexStock). Required. | | series | StockChartOptions["series"] | Convenience: overrides options.series (handy for frequently-changing data). | | apexCharts | ApexChartsCtor | Optional: the imported ApexCharts constructor, injected instead of using the window.ApexCharts global. Applied at mount. | | className | string | Class on the container element. | | style | React.CSSProperties | Inline styles on the container element. |

Injecting ApexCharts in a bundler app:

import ApexCharts from "apexcharts";
import ApexStock from "react-apexstock";

<ApexStock options={options} apexCharts={ApexCharts} />;

Pass stable/memoized options and series — a new object identity on every render triggers an update().

Imperative ref

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

function Toolbar() {
  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 }} />
    </>
  );
}

• getInstance() → the live ApexStock instance (call any of its methods: update, updateIndicator, updateTheme, export, …), or null before mount.
• getElement() → the container <div>.

Live demo

A no-build demo lives in demo/: the real wrapper driving the real ApexStock core (the unit tests mock the core, this does not). It loads React/ReactDOM from this package's node_modules via small ESM shims, and the core plus its ApexCharts peer from the repo root, so build both first and serve over a static server (no bundler needed):

npm install                  # in this package, for the React UMD builds
npm run build                # build the wrapper -> dist/
(cd ../.. && npm run build)  # build the core -> dist/

# Serve from the repo root, so the core's dist/ and its installed ApexCharts
# both resolve, then open the demo URL:
cd ../.. && python3 -m http.server 8080
# http://localhost:8080/packages/react-apexstock/demo/

SSR

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.)