Trading-grade charts,
in one function call
A lightweight TypeScript charting engine with indicators, drawing tools, order lines, brackets, alerts, replay and themes built in. Framework-agnostic, typed end to end — everything on this page is the actual library, live.
Live simulated tape · crosshair, pan, zoom and keyboard work out of the box
Feature-rich, tiny package
No plugin store, no per-feature licensing. The whole surface ships in one package, typed end to end.
High-performance
Viewport downsampling keeps pan and zoom at 120fps with 50,000 bars loaded — 8.3ms average frame time, extremes preserved exactly.
Zero dependencies
One Canvas 2D context, framework-agnostic TypeScript with full type definitions. Works in React, Vue, Svelte or plain JS.
Streaming updates
Push bars with setData/upsertBar, or attach a TradingView-style datafeed and let the chart pull — with lazy history as you scroll.
Full styling control
Five theme presets, per-axis label styling, dash patterns, watermarks and TradingView-style label layers — or spread a preset into your own brand.
Interactive & mobile-ready
Crosshair, pan, zoom, keyboard shortcuts, press-and-hold inspection and bigger touch targets out of the box.
Trading built in
Order lines, draggable TP/SL brackets, positions with live P&L, execution markers, price alerts and bar replay — events in, ink out.
Finance at the heart of it all
One topic per card — flip through the variants with the tabs. Every chart is the library rendering live demo data.
Series styles
Overlay indicators
Pane indicators
Volume tools
Drawing tools
Brackets & order lines
Alerts & markers
Compare & scales
Themes
Multi-chart sync
Let your users write their own indicators
A Pine-style runtime ships in the core package: inline input declarations, TA helpers, plots, ranges and guides. Settings dialogs auto-generate from the declarations, a 1s execution budget circuit-breaks runaway scripts, and errors render inline instead of freezing the tab.
The lower pane of the chart below is the output of this exact script — axis, legend, guides and value tags included.
Edit & run scripts in the playgroundconst length = input.int("Length", 14, { min: 1, max: 500 });
const color = input.color("Line color", "#6e85ff");
function compute(bars, inputs, hp) {
const closes = bars.map(b => b.c);
const gains = closes.map((c, i) => i === 0 ? null : Math.max(0, c - closes[i - 1]));
const losses = closes.map((c, i) => i === 0 ? null : Math.max(0, closes[i - 1] - c));
const avgGain = hp.rma(gains, length);
const avgLoss = hp.rma(losses, length);
const rsi = avgGain.map((g, i) => {
const l = avgLoss[i];
if (g == null || l == null) return null;
return l === 0 ? 100 : 100 - 100 / (1 + g / l);
});
return {
plots: [{ title: "RSI", values: rsi, color }],
range: { min: 0, max: 100 },
guides: [30, 70]
};
}