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