ApexCharts > ApexStock

Rich Technical Indicators

Twenty-three indicators ship built in, split by where they draw: overlays share the price axis, while oscillators each get their own stacked pane and several can be open at once. This one spotlights them individually, so open the indicator menu to stack your own. Anything missing can be registered globally with ApexStock.registerIndicator.

Interactive Drawing Tools

Annotate price action with trend lines, retracements, and studies layered right on the chart. Watch it overlay studies automatically, then grab the drawing toolbar yourself.

Multiple Chart Types

Switch between candlestick, OHLC, line, area, column, Heikin-Ashi and Renko views to read your data the way that suits you. It cycles them for you: pick one to take over.

Compare Instruments, Rebased

Absolute prices on one axis compare share price, not performance. Comparison mode rebases each instrument to a common starting point, so a $40 stock and a $400 stock can be read against each other honestly. This is what to reach for instead of a second entry in series, which would be read as an indicator.

See it live
Two instruments compared on one stock chart, rebased to a common start
A candlestick chart updating with live streaming prices

Stream Live Prices

appendData adds closed bars incrementally and updates every active indicator in place, rather than recomputing the chart from a replaced series. A live chart therefore keeps its zoom, its drawings and its indicator panes as ticks arrive, instead of resetting under the reader.

See it live

Measure a Range, or Skip the Chart Entirely

Drag out any window and read its change, high, low and volatility directly off the selection. The same engine is exposed as ApexStock.stats with no chart and no DOM required, so returns, drawdown and multi-instrument alignment can run in a worker, a test, or on a server building a report.

See it live
A measured range on a stock chart showing computed statistics

Tooltip Pinning

Pin price tooltips to the chart as reference points you can move or delete.

Advanced Time Navigation

A responsive time axis that adapts tick density and labels to the zoom level.

Smooth Navigation

Zoom and pan thousands of data points smoothly, with no loss of performance.

Chart Exporting

Export to SVG with all annotations, indicators and drawings intact.

Guides and worked examples

Longer-form pages that use ApexStock, beyond the reference docs.

Guide

JavaScript Stock Chart

Candles need four numbers per period, in one array, in one order. This covers getting your price data into that shape and what you can compute once it is.

Recipe

Stream live market data into a stock chart

A tick is not a bar. Getting that distinction wrong gives you one candle per message and no error to explain it, so this starts there and ends with the teardown that bites in every single-page app.

What's new

ApexStock is at 0.5.0. Install it with npm i apexstock.

Release notes for this product are not on the blog yet. The documentation tracks the current API.

Current versions of every Apex product →

ApexStock FAQ

What data format does ApexStock expect?

Each point carries its four prices in a single `y` array ordered [open, high, low, close], with optional volume as `v`: { x: 1767312000000, y: [187, 189, 185, 188], v: 1010000 }. Passing four separate open/high/low/close keys instead is the most common reason a first stock chart draws nothing. If your data arrives in another shape, ApexStock.normalize, ApexStock.fromArrays and ApexStock.fromCSV convert row objects, tuple arrays, parallel column arrays and raw CSV text, resolving column names by case-insensitive alias so most API responses need no mapping at all.

Do I need ApexCharts as well?

Yes. ApexStock is built on ApexCharts.js and declares it as a peer dependency (apexcharts ^7.1.0), so install both. ApexStock does not import it for you, so register it once with ApexStock.setApexCharts(ApexCharts), or inject it per instance with new ApexStock(el, options, { ApexCharts }). A window.ApexCharts global also resolves, which is what makes script-tag usage work.

How do I show two symbols on the same chart?

Use comparison mode rather than a second series: only series[0] is the instrument, and further entries in series are treated as indicators. addComparison adds an instrument and setComparisonMode switches between absolute and rebased views. That distinction is the point of the feature, because absolute prices on a shared axis compare share price, while rebasing to a common starting point compares performance.

Can I compute indicators and statistics without rendering a chart?

Yes. ApexStock.stats is the analysis engine on its own, with no chart and no DOM, so it runs in a web worker, a test, or on a server generating a report. It covers returns, volatility, drawdown, rebasing and multi-instrument alignment. align is the one to know if you compare instruments: two tickers rarely share a trading calendar, and fill: 'hold' carries the last observation forward without inventing history before an instrument's first observation.

Which plans include ApexStock?

Premium and OEM. ApexStock is the most narrowly licensed product in the family: neither the Community tier nor Pro includes it, so the under-$2M revenue waiver that covers ApexCharts.js does not extend to it. Nothing in the family is open source, and source published on GitHub is not an open licence. Every feature renders in full without a licence key, watermarked, so you can evaluate it against your own data first. The pricing page lists what each plan includes.

From install to a rendered chart

Everything a working candlestick chart needs, including the peer-dependency wiring and the exact data shape.

// npm install apexstock apexcharts
import ApexCharts from 'apexcharts'
import ApexStock from 'apexstock'

// ApexStock is built on ApexCharts but does not import it. Register it once.
ApexStock.setApexCharts(ApexCharts)

const chart = new ApexStock(document.querySelector('#chart'), {
  chart: { height: 500 },
  theme: { mode: 'light' },
  series: [
    {
      name: 'AAPL',
      // The four prices live in one `y` array: [open, high, low, close].
      // `v` is optional volume. Only series[0] is the instrument; further
      // entries in `series` are read as indicators.
      data: [
        { x: 1767312000000, y: [187, 189, 185, 188], v: 1_010_000 },
        { x: 1767398400000, y: [188, 191, 187, 190], v: 1_240_000 },
        { x: 1767484800000, y: [190, 190, 186, 187], v: 980_000 },
      ],
    },
  ],
})

chart.render()

// Indicators are added by name, case-insensitively. Calling this again
// re-parameterises the indicator rather than toggling it off, which makes it
// safe to drive from a controlled UI.
chart.updateIndicator('rsi', { period: 14 })

Ready to enhance your financial applications?

Start building powerful stock charts with ApexStock today.

Explore Demos