lightweight-charts-drawing

Live Demo

68 drawing tools for TradingView's lightweight-charts library. Includes trend lines, Fibonacci tools, Gann analysis, channels, pitchforks, shapes, annotations, and forecasting tools.

Installation

npm install lightweight-charts-drawing lightweight-charts

Quick Start

import { createChart, CandlestickSeries } from 'lightweight-charts';
import { DrawingManager, TrendLine, FibRetracement } from 'lightweight-charts-drawing';

// Create chart
const chart = createChart(document.getElementById('chart')!, {
  width: 800,
  height: 400,
});

const series = chart.addSeries(CandlestickSeries);
series.setData([/* ... your OHLC data ... */]);

// Set up drawing manager
const manager = new DrawingManager();
manager.attach(chart, series, document.getElementById('chart')!);

// Add a trend line
const trendLine = new TrendLine('tl-1', [
  { time: '2024-01-15', price: 100 },
  { time: '2024-02-15', price: 110 },
], { lineColor: '#2962FF', lineWidth: 2 });

manager.addDrawing(trendLine);

// Add a Fibonacci retracement
const fib = new FibRetracement('fib-1', [
  { time: '2024-01-01', price: 95 },
  { time: '2024-03-01', price: 115 },
]);

manager.addDrawing(fib);

Lightweight-Charts Integration Example

import { createChart, CandlestickSeries, ColorType } from 'lightweight-charts';
import {
  DrawingManager,
  TrendLine,
  HorizontalLine,
  Rectangle,
  TextAnnotation,
  getToolRegistry,
} from 'lightweight-charts-drawing';

// Create chart
const container = document.getElementById('chart')!;
const chart = createChart(container, {
  layout: {
    background: { type: ColorType.Solid, color: '#131722' },
    textColor: '#d1d4dc',
  },
  width: 1000,
  height: 500,
});

const series = chart.addSeries(CandlestickSeries);
series.setData([/* ... OHLC data ... */]);

// Initialize drawing manager
const manager = new DrawingManager();
manager.attach(chart, series, container);

// Listen for events
manager.on('drawing:selected', (event) => {
  console.log('Selected:', event.drawingId);
});

// Add drawings programmatically
const support = new HorizontalLine('support', [
  { time: '2024-01-01' as any, price: 95 },
], { lineColor: '#26a69a', lineWidth: 1 });

manager.addDrawing(support);

// Select, deselect, remove
manager.selectDrawing('support');
manager.deselectAll();
manager.removeDrawing('support');

// Export/import drawings as JSON
const json = manager.exportDrawings();
// manager.importDrawings(json, factory);

// Access the tool registry for all 68 tool definitions
const registry = getToolRegistry();
const allTools = registry.getAllTools();

Available Drawing Tools (68)

Lines

Tool	Export	Anchors
Trend Line	TrendLine	2
Ray	Ray	2
Info Line	InfoLine	2
Extended Line	ExtendedLine	2
Trend Angle	TrendAngle	2
Horizontal Line	HorizontalLine	1
Horizontal Ray	HorizontalRay	1
Vertical Line	VerticalLine	1
Cross Line	CrossLine	1

Channels

Tool	Export	Anchors
Parallel Channel	ParallelChannel	3
Regression Trend	RegressionTrend	2
Flat Top/Bottom	FlatTopBottom	3
Disjoint Channel	DisjointChannel	4

Pitchforks

Tool	Export	Anchors
Andrews Pitchfork	AndrewsPitchfork	3
Schiff Pitchfork	SchiffPitchfork	3
Modified Schiff Pitchfork	ModifiedSchiffPitchfork	3
Inside Pitchfork	InsidePitchfork	3

Fibonacci

Tool	Export	Anchors
Fib Retracement	FibRetracement	2
Fib Extension	FibExtension	3
Fib Channel	FibChannel	3
Fib Time Zone	FibTimeZone	2
Fib Speed Fan	FibSpeedFan	2
Fib Time Extension	FibTimeExtension	3
Fib Circles	FibCircles	2
Fib Spiral	FibSpiral	2
Fib Arcs	FibArcs	2
Fib Wedge	FibWedge	3
Pitchfan	Pitchfan	3

Gann

Tool	Export	Anchors
Gann Box	GannBox	2
Gann Fan	GannFan	2
Gann Square Fixed	GannSquareFixed	1
Gann Square	GannSquare	2

Forecasting & Measurement

Tool	Export	Anchors
Long Position	LongPosition	3
Short Position	ShortPosition	3
Forecast	Forecast	2
Bars Pattern	BarsPattern	3
Projection	Projection	3
Price Range	PriceRange	2
Date Range	DateRange	2
Date & Price Range	DatePriceRange	2

Shapes

Tool	Export	Anchors
Rectangle	Rectangle	2
Rotated Rectangle	RotatedRectangle	3
Circle	Circle	2
Triangle	Triangle	3
Ellipse	Ellipse	2
Arc	Arc	3
Path	Path	2+
Polyline	Polyline	2+
Curve	Curve	4
Double Curve	DoubleCurve	3

Annotations

Tool	Export	Anchors
Text	TextAnnotation	1
Callout	Callout	2
Anchored Text	AnchoredText	2
Note	Note	1
Price Note	PriceNote	1
Price Label	PriceLabel	1
Flag Mark	FlagMark	1
Pin	Pin	1
Comment	Comment	1
Signpost	Signpost	1
Table	Table	1
Brush	Brush	2+
Highlighter	Highlighter	2+
Arrow	Arrow	2
Arrow Marker	ArrowMarker	1
Arrow Mark Up	ArrowMarkUp	1
Arrow Mark Down	ArrowMarkDown	1

Architecture

Each drawing tool follows a two-class pattern:

• Tool class (e.g. TrendLine) - extends Drawing, holds anchors/state, implements hit testing and geometry computation
• Pane view (e.g. TrendLinePaneView) - implements IPrimitivePaneView from lightweight-charts, handles canvas rendering

The DrawingManager orchestrates lifecycle, selection, drag-editing, and event emission.

License

MIT