JavaScript charts

StockSharp JS Trading Charts is a standalone, dependency-free browser charting library. It is published on npm as @stocksharp/chart and ships the sschart canvas engine used by the StockSharp web terminal. A working version is available in the live demo.

StockSharp JavaScript trading chart

Unlike the Windows components from StockSharp.Xaml.Charting, this library runs in a browser and draws directly on an HTML canvas. The engine is exposed through the SSChart global (from dist/sschart.js) and can also be imported as ECMAScript modules from the npm package (import { createChart, CandlestickSeries } from '@stocksharp/chart').

Live demo

The chart below is the real engine running on this page — candles with a volume histogram and a moving average. Drag to scroll, use the wheel to zoom, and press the expand button (top-right) to open it full screen.

Capabilities

A full set of price series: candlesticks, OHLC bars, line, area, histogram, band, plus the derived Heikin-Ashi, Renko and Point & Figure types.
Exact order-flow studies: footprint, volume profile and TPO (market profile).
Historical loading and real-time updates via setData and update.
Trade markers, price lines, crosshair, zooming, scrolling and automatic range calculation.
An indicator engine with approximately 160 calculation implementations.
Overlay indicators, synchronized oscillator panes and a crosshair-driven legend.
Light and dark themes, a context menu, an indicator dialog and chart-type switching.

Installation

Install the package from npm and import the ES modules:

npm install @stocksharp/chart

import { createChart, CandlestickSeries } from '@stocksharp/chart';

Or, without a bundler, drop in the pre-built SSChart global with a <script> tag as shown below.

Adding a chart to a page

The build produces dist/sschart.js, which publishes window.SSChart. Time values passed to the API are Unix timestamps in seconds.

<div id="chart" style="width: 800px; height: 400px"></div>
<script src="dist/sschart.js"></script>

Create a chart, add a series and load the data:

const chart = SSChart.createChart(document.getElementById('chart'), {
  timeScale: { timeVisible: true },
  crosshair: { mode: SSChart.CrosshairMode.Normal },
});

const candles = chart.addSeries(SSChart.CandlestickSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  borderVisible: false,
});

candles.setData([
  { time: 1704153600, open: 120, high: 122, low: 119, close: 121 },
  { time: 1704240000, open: 121, high: 124, low: 120, close: 123 },
]);

candles.update({
  time: 1704326400,
  open: 123,
  high: 123.5,
  low: 122.8,
  close: 123.2,
});

chart.timeScale().fitContent();

Calling update with the current timestamp replaces the last point. A newer timestamp appends a point.

Chart modes

Each series type has its own topic with a live demo and the JavaScript that configures it:

Candlestick — classic OHLC candles.
OHLC bars — open/close ticks on a vertical range bar.
Line — a single polyline through the closes.
Area — a line with a gradient fill.
Histogram — vertical bars, typically volume.
Band — an upper/lower channel (envelopes, Bollinger).
Heikin-Ashi — smoothed candles that filter noise.
Renko — price-driven bricks, time-agnostic.
Point and Figure — X/O columns of price movement.
Footprint — bid × ask volume at every price inside each bar.
Volume profile — volume-at-price with POC and value area.
TPO (Market profile) — time spent at each price per session.

Beyond the series types, the chart also has an indicator engine with about 160 studies and lazy history backfill that loads older bars as you scroll.

For the visual strategy editor rendered by the same web stack, see JavaScript diagram.

Layers on top of the engine

Everything described above is the base engine, the @stocksharp/chart entry point. The rest is laid out in separate published entry points: import the one you need, there is no need to copy the sources.

Entry point	What it gives
Chart UI layer — `@stocksharp/chart/ui`	A ready-made UI layer: legend, context menu, chart type switcher, pane manager, indicator dialog. Requires the `@stocksharp/chart/ui.css` stylesheet.
`@stocksharp/chart/indicators`	`IndicatorEngine`, indicator renderers and settings. The calculations themselves are in the @stocksharp/indicators package.
Trading from the chart — `@stocksharp/chart/trading`	The trading layer: order lines, the position with its current result, protective orders and quotes. It knows no broker — it reports the intent, and the host carries it out.
Drawing tools — `@stocksharp/chart/drawings`	Drawing tools, snapping to bars and registration of your own shapes.
Multiple charts — `@stocksharp/chart/workspace`	Several synchronized charts, instrument comparison, a range navigator, indicator templates.
Saving the layout — `@stocksharp/chart/persistence`	Saving and restoring the layout with versioning and migrations.
Time and trading sessions — `@stocksharp/chart/time`	Trading calendar, sessions and time zones, countdown to the bar close.
`@stocksharp/chart/orderflow`	Cluster analysis: footprint and volume profile.

Without a bundler the same features are available through the browser bundle: dist/sschartui.js publishes the global SSChartUI object.

Building from source

Clone the repository and use the included npm scripts:

git clone https://github.com/StockSharp/JS-Charts.git
cd JS-Charts
npm install
npm run build
npm test
npm run serve

The development server serves the demo at http://localhost:8791/demo/index.html.