tradersview-charts

An advanced, embeddable financial charting library for the web — 80+ drawing tools, annotations, indicators, and a pro hotkey workflow, with a clean imperative API and a framework-free toolbar.

npm install tradersview-charts

That's it — no extra peer packages to install.

Quick start

import { createChart, CandlestickSeries } from 'tradersview-charts'
import 'tradersview-charts/style.css'

const chart = createChart(document.getElementById('app')!, { autoSize: true })
const series = chart.addSeries(CandlestickSeries)
series.setData(candles) // OHLCV is captured automatically for magnet / VWAP / volume tools

// ── the advanced layer lives on chart.tradersview ──
chart.tradersview.mountUI()              // framework-free flyout toolbar + style bar
chart.tradersview.setTool('trend')       // activate any tool
chart.tradersview.addIndicator('rsi')    // SMA / EMA / BB / VWAP / Volume / RSI / MACD
chart.tradersview.toggleMagnet()         // snap to OHLC
const json = chart.tradersview.save()    // persist drawings
chart.tradersview.load(json)

Already have a chart instance? Attach the tools to it directly:

import { attachDrawingTools } from 'tradersview-charts'
const tv = attachDrawingTools(chart, series, container)
tv.setTool('fib')

Drawing tools (80+, by category)

• Lines — Trend Line, Ray, Info Line, Extended Line, Trend Angle, Horizontal Line/Ray, Vertical, Cross, Arrow, Parallel Channel, Anchored VWAP
• Fib & Gann — Fib Retracement, Trend-Based Fib Extension, Fib Channel, Fib Time Zone, Fib Circles, Fib Speed/Resistance Fan, Pitchfork (Andrews / Schiff / Modified Schiff / Inside), Gann Box / Square / Fan
• Patterns — XABCD, Cypher, ABCD, Triangle, Three Drives, Head & Shoulders, Elliott Impulse / Triangle / Correction / Combos, Cyclic Lines
• Shapes — Rectangle, Rotated Rectangle, Ellipse, Circle, Triangle, Arc, Curve, Double Curve, Sector, Polyline, Path, Brush, Highlighter
• Annotations — Text, Note, Callout, Comment, Price Label, Signpost, Arrow Marker, Arrow Mark Up/Down, Flag
• Projection — Long/Short Position (risk-reward), Price/Date/Date-and-Price Range, Measure, Fixed-Range & Anchored Volume Profile

Every drawing is selectable, movable, resizable (handles), styleable (color / width / line-style), lockable, cloneable, z-orderable, hideable, and serializable.

Indicators

SMA, EMA, Bollinger Bands, VWAP (price-pane overlays) and Volume, RSI, MACD (their own panes).

Hotkeys

Alt+T Trend · Alt+F Fib · Alt+H Horizontal · Alt+V Vertical · Alt+C Cross · Alt+Shift+R Rectangle · Shift+drag Measure · Ctrl+Alt+H hide all · Delete remove selected · Esc cursor.

API

chart.tradersview            // controller
  .setTool(id) .getTool()
  .setToolOptions({ color, lineWidth, lineStyle, ... })
  .toggleMagnet() .toggleHideAll() .setStayInDrawingMode(b)
  .deleteSelected() .cloneSelected() .clearDrawings()
  .addIndicator(id) .removeIndicator(instanceId) .listIndicators()
  .feedData(ohlcv[])                       // volume-profile / VWAP with real volume
  .save() / .load() / .toJSON() / .fromJSON()
  .mountUI(target?) / .unmountUI()
  .subscribe(state => ...)                 // tool / selection / options state
  .toolCatalog                             // enumerate every tool + category

Security & footprint

• Ships as a single ES module (~93 kB) with full TypeScript types. No network calls, no eval, no remote code.
• The built-in UI renders tool labels via textContent (not HTML) and only emits static, library-controlled SVG — no untrusted markup is injected.
• The published tarball is an explicit allowlist (dist, README, LICENSE) — no source, configs or secrets are shipped.

Credits & license

MIT licensed. Chart rendering is powered by the open-source lightweight-charts engine (Apache-2.0), bundled as a dependency.