OpenAlgo Charts
A JavaScript and TypeScript library for financial charts.
Show market prices, add indicators and drawings, set alerts, and replay historical
data in your web app. Use your own data and interface, or add the optional widget
for a toolbar, menus and dialogs. Built for OpenAlgo and custom trading apps,
with no runtime dependencies.
Documentation · Live examples · Getting started · Migrating to 2.0 · Architecture
Install
npm install openalgo-charts
Current version: 2.7.2. Elliott wave counts are numbered from the point after their origin, as a count is read: the origin is unlabelled, the waves read (1) to (5) or (A) to (C) in the default Intermediate degree, each label is centred on its point, a count is drawn as it is placed, and each count's icon names its first and last wave. 2.7.1 added the five Elliott wave counts, each drawn from its origin and labelled by degree, for 90 drawing tools.
2.6.4 was an order flow release: a footprint finds the imbalances beside a row that never traded, prints volume shaded by delta, alerts once when price comes back to a zone, extends only the zone kinds you pick, and takes a colour for each of its parts or one of six named themes; the website gains an Order flow page of live footprint and market profile examples. 2.6.3 was a finish release: finer glyphs at one line weight, a drawing rail that folds away, a smoother wheel and trackpad zoom, a widget whose drag keeps the price scale fitting, and a log scale that fills the pane. 2.6.2 was a fix for the bottom bar's ranges and Go to, which reported missing history across a weekend or another gap no session trades in. 2.6.1 was order flow analytics for the footprint (trade classification, a trade size filter, imbalance and delta views, zones, unfinished auctions, delta flips and session statistics), rows aligned on the even boundary, Renko and point and figure sizing from price or the ATR, and settings dialogs for both chart types in the widget and the reference host. 2.6.0 was analysis depth and a stricter API: the chart applies Heikin Ashi, Renko, range bars, line break, point and figure and Kagi to the bars you feed, live, with each study on the elements or the underlying bars; seven new built-ins and a timeframe input on 29 of them; symbol search through the OpenAlgo feed; rich event details with host actions; a typed event map for chart.on; a classic-script build of every tier and require() of the ESM files; and declarations that hold for a host compiling with both strict flags. 2.5.10 was the persistence, saved layouts and chart grid release.
See the changelog for release notes.
Quick start
Give the chart a container with a height:
<div id="chart" style="width:100%;height:420px"></div>
Then create a chart and supply its data:
import { createChart, generateBars } from 'openalgo-charts';
const container = document.getElementById('chart');
if (!container) throw new Error('Chart container not found');
const chart = createChart(container);
chart.addSeries('candlestick').setData(generateBars(1700000000, 200, 3600));
chart.fitContent();
generateBars supplies sample prices. Replace them with data from your feed.
Bar timestamps use UTC seconds. See getting started
for setup, data feeds
for live data, or the widget example for chart controls.
In a framework, create the chart when the component mounts and call chart.destroy()
when it unmounts. Framework integration
covers plain JavaScript and the CDN build, React, Next.js, Vue 3, Angular and Svelte
with the same parts for each: lifecycle, reactivity, resize and theme, live data, the
widget, cached views and server rendering. Its
Vue 3 section
is backed by a no-build example in examples/vue tested in Chromium,
Firefox and WebKit. In Vue, hold the chart in a shallowRef, never in ref() or
reactive().
Architecture
How data reaches the chart, what your app owns, and which features you can import.
Open the full-size diagram.
Walkthrough video
A tour of OpenAlgo Charts running inside OpenAlgo: chart types, the indicator library,
drawing tools, order placement from the chart, market replay, combined option premium
charts, and the historical data explorer.
Live OpenAlgo trading terminal
Right-click the chart to place market / limit / stop orders, drag the order and TP/SL bracket lines to modify, and watch live P&L on the position line - all on real OpenAlgo history + WebSocket tick data, with an analyzer (sandbox) mode so nothing goes live until you switch it to live.
Examples gallery
Every chart in the live gallery is the real library running in your browser - switch tabs, hover the crosshair, drag the order lines, place a drawing. What you see is the code that ran.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
