DocumentationGetting Started

Getting started

OpenAlgo Charts is a dependency-free, canvas-based financial charting engine. The full package (every tier) is 215.76 KB Brotli, the base engine alone is 77.23 KB, and it has zero runtime dependencies - what you import is what ships.

Nothing to install for a first look: the library runs straight from a CDN with no build step, which is covered in Use from a CDN. Everything below is the npm route, for an app you are building.

Install

npm install openalgo-charts

No peer dependencies, no CSS to import, no web component registration. It runs in any modern browser (ES2020+).

Your first chart

createChart takes a container element; addSeries adds a drawable; setData feeds it bars. Time is UTC seconds.

live
Rendering live chart…
View example code
const chart = lib.createChart(el);

const series = chart.addSeries('candlestick');
series.setData(lib.generateBars(1700000000, 120, 3600));

chart.timeScale.fitContent(120);
return chart;

In a real app you would pass your own bars instead of generateBars (a seeded synthetic walk used here so the demo is reproducible):

import { createChart } from 'openalgo-charts';
 
const chart = createChart(document.getElementById('chart'));
const series = chart.addSeries('candlestick');
series.setData([
  { time: 1705286700, open: 100, high: 101, low: 99.5, close: 100.6, volume: 1200 },
  { time: 1705286760, open: 100.6, high: 101.4, low: 100.2, close: 101.1, volume: 900 },
  // ...
]);

Internal time is always UTC seconds. Feed adapters convert broker formats (IST date strings, epoch milliseconds) at the edge - see Live Data. How those seconds are labelled is a separate setting: the chart’s timezone defaults to Asia/Kolkata and takes any IANA name, at construction or at runtime - see Timezones.

Live updates

Push new ticks into the last bar (or append a new one) with series.update(). A CandleBuilder turns a raw tick stream into interval OHLC for you:

import { CandleBuilder } from 'openalgo-charts';
 
const builder = new CandleBuilder({ intervalSec: 60, volumeMode: 'ltq-sum' });
builder.seed(lastHistoricalBar);
 
ws.onTick(({ price, ltq, timeSec }) => {
  const u = builder.onTick({ time: timeSec, price, ltq });
  if (u) series.update(u.bar); // mutates the last candle, or appends a new one
});

Loadable tiers

Pay only for what you use - each tier is a separate entry point:

ImportContents
openalgo-chartsbase engine + all standard chart types + markers / events / EMA / RSI / ATR / Supertrend
openalgo-charts/tradeorder / position / bracket lines, DOM ladder, order engine
openalgo-charts/transformRenko, Range, Point & Figure, Kagi, Line Break, Heikin Ashi
openalgo-charts/profileVolume Profile, Market Profile (TPO), Footprint, order flow
openalgo-charts/indicators102 built-in indicators (SMA/EMA/MACD/Bollinger/RSI/ADX/VWAP/Supertrend/HalfTrend/CPR/…) + the Tier-2 contract
openalgo-charts/draw85 drawing tools + a headless drawing controller
openalgo-charts/webglthe WebGL2 series backend behind renderer: 'auto', composited into the pane’s canvas
openalgo-charts/widgetthe chart with its chrome in one createWidget call: top bar, drawing rail, status line, dialogs, right-click menu, shortcuts, persistence. The only tier that ships DOM
import { createChart } from 'openalgo-charts';
import { OrderEngine } from 'openalgo-charts/trade';
import { runTransform, RenkoTransform } from 'openalgo-charts/transform';

Next steps

Migrating to 2.0