{"_id":"lightweight-charts-drawing","_rev":"2-93f473b277eaac8f32d64eef8fd9cef2","name":"lightweight-charts-drawing","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"lightweight-charts-drawing","version":"0.1.0","keywords":["trading","charts","lightweight-charts","drawing-tools","technical-analysis","trendline","fibonacci"],"license":"MIT","_id":"lightweight-charts-drawing@0.1.0","maintainers":[{"name":"deepentropy16549846511654131546841132","email":"otremoulis@gmail.com"}],"homepage":"https://github.com/deepentropy/lightweight-charts-drawing#readme","bugs":{"url":"https://github.com/deepentropy/lightweight-charts-drawing/issues"},"dist":{"shasum":"9647809a6ef587ee49fbaf3488207fcea96841dd","tarball":"https://registry.npmjs.org/lightweight-charts-drawing/-/lightweight-charts-drawing-0.1.0.tgz","fileCount":7,"integrity":"sha512-NXGFPjFAGTfJWaLbRSHrxA6ih8B0Eo5Fwpos2THlGvLVHgHp3N/YvBFNoAJ/nWn9jMjjseGbgYlChJ3j3hPw5A==","signatures":[{"sig":"MEUCIQD1rt03eK2ODe7c3J7Jcs63YcPPZfAILDFp6s12qN0acwIgCiQ6Y7VwsUQ19/vNKZK52Yj7QowZ0zJR9XVUYCYHbeM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/lightweight-charts-drawing@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":2748788},"main":"./dist/lightweight-charts-drawing.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/lightweight-charts-drawing.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/lightweight-charts-drawing.es.js","require":"./dist/lightweight-charts-drawing.umd.js"}},"gitHead":"330aefd5babdfa41c87893fa3958d0d865799384","scripts":{"dev":"vite","demo":"vite --config vite.demo.config.ts","build":"tsc && vite build","preview":"vite preview","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.demo.config.ts"},"_npmUser":{"name":"deepentropy16549846511654131546841132","email":"otremoulis@gmail.com"},"repository":{"url":"git+https://github.com/deepentropy/lightweight-charts-drawing.git","type":"git"},"_npmVersion":"10.8.2","description":"Drawing tools plugin for TradingView's lightweight-charts","directories":{},"_nodeVersion":"20.20.0","dependencies":{"fancy-canvas":"^2.1.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.3","typescript":"^5.7.2","vite-plugin-dts":"^4.3.0","lightweight-charts":"^5.0.9"},"peerDependencies":{"lightweight-charts":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/lightweight-charts-drawing_0.1.0_1772101872638_0.40151894053902026","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"lightweight-charts-drawing","version":"0.1.1","description":"Drawing tools plugin for TradingView's lightweight-charts","type":"module","main":"./dist/lightweight-charts-drawing.umd.js","module":"./dist/lightweight-charts-drawing.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/lightweight-charts-drawing.es.js","require":"./dist/lightweight-charts-drawing.umd.js"}},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","typecheck":"tsc --noEmit","demo":"vite --config vite.demo.config.ts","build:demo":"vite build --config vite.demo.config.ts"},"peerDependencies":{"lightweight-charts":"^5.0.0"},"devDependencies":{"lightweight-charts":"^5.0.9","typescript":"^5.7.2","vite":"^6.0.3","vite-plugin-dts":"^4.3.0"},"keywords":["trading","charts","lightweight-charts","drawing-tools","technical-analysis","trendline","fibonacci"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/deepentropy/lightweight-charts-drawing.git"},"dependencies":{"fancy-canvas":"^2.1.0"},"_id":"lightweight-charts-drawing@0.1.1","gitHead":"778f1e5cf3d62c2499dd4c686a00ab66bb01c44f","bugs":{"url":"https://github.com/deepentropy/lightweight-charts-drawing/issues"},"homepage":"https://github.com/deepentropy/lightweight-charts-drawing#readme","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-lS5s94QnMA6mkXAbOCdLdux1rgzdlJn5vIxQSBNj+1pFtuMHaAlV+ciElSI0wNTzLNM1LQo8JN7j83GpApTcgQ==","shasum":"c531ba104e80e50f45c98c63a72f59731487bc7f","tarball":"https://registry.npmjs.org/lightweight-charts-drawing/-/lightweight-charts-drawing-0.1.1.tgz","fileCount":7,"unpackedSize":2748339,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/lightweight-charts-drawing@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIC7Lwkh+mn1dToaWYoKqk2TItletFYDO6EBu0O7+x5eOAiEAjtjK/uX3s/b0YDScfXG9U/L4YL1aJ7/CBnrUzGVrXME="}]},"_npmUser":{"name":"deepentropy16549846511654131546841132","email":"otremoulis@gmail.com"},"directories":{},"maintainers":[{"name":"deepentropy16549846511654131546841132","email":"otremoulis@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lightweight-charts-drawing_0.1.1_1772102452632_0.9184182210987895"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-26T10:31:12.482Z","modified":"2026-02-26T10:40:53.138Z","0.1.0":"2026-02-26T10:31:12.833Z","0.1.1":"2026-02-26T10:40:52.809Z"},"bugs":{"url":"https://github.com/deepentropy/lightweight-charts-drawing/issues"},"license":"MIT","homepage":"https://github.com/deepentropy/lightweight-charts-drawing#readme","keywords":["trading","charts","lightweight-charts","drawing-tools","technical-analysis","trendline","fibonacci"],"repository":{"type":"git","url":"git+https://github.com/deepentropy/lightweight-charts-drawing.git"},"description":"Drawing tools plugin for TradingView's lightweight-charts","maintainers":[{"name":"deepentropy16549846511654131546841132","email":"otremoulis@gmail.com"}],"readme":"# lightweight-charts-drawing\n\n**[Live Demo](https://deepentropy.github.io/lightweight-charts-drawing/)**\n\n68 drawing tools for TradingView's lightweight-charts library. Includes trend lines, Fibonacci tools, Gann analysis, channels, pitchforks, shapes, annotations, and forecasting tools.\n\n## Installation\n\n```bash\nnpm install lightweight-charts-drawing lightweight-charts\n```\n\n## Quick Start\n\n```typescript\nimport { createChart, CandlestickSeries } from 'lightweight-charts';\nimport { DrawingManager, TrendLine, FibRetracement } from 'lightweight-charts-drawing';\n\n// Create chart\nconst chart = createChart(document.getElementById('chart')!, {\n  width: 800,\n  height: 400,\n});\n\nconst series = chart.addSeries(CandlestickSeries);\nseries.setData([/* ... your OHLC data ... */]);\n\n// Set up drawing manager\nconst manager = new DrawingManager();\nmanager.attach(chart, series, document.getElementById('chart')!);\n\n// Add a trend line\nconst trendLine = new TrendLine('tl-1', [\n  { time: '2024-01-15', price: 100 },\n  { time: '2024-02-15', price: 110 },\n], { lineColor: '#2962FF', lineWidth: 2 });\n\nmanager.addDrawing(trendLine);\n\n// Add a Fibonacci retracement\nconst fib = new FibRetracement('fib-1', [\n  { time: '2024-01-01', price: 95 },\n  { time: '2024-03-01', price: 115 },\n]);\n\nmanager.addDrawing(fib);\n```\n\n## Lightweight-Charts Integration Example\n\n```typescript\nimport { createChart, CandlestickSeries, ColorType } from 'lightweight-charts';\nimport {\n  DrawingManager,\n  TrendLine,\n  HorizontalLine,\n  Rectangle,\n  TextAnnotation,\n  getToolRegistry,\n} from 'lightweight-charts-drawing';\n\n// Create chart\nconst container = document.getElementById('chart')!;\nconst chart = createChart(container, {\n  layout: {\n    background: { type: ColorType.Solid, color: '#131722' },\n    textColor: '#d1d4dc',\n  },\n  width: 1000,\n  height: 500,\n});\n\nconst series = chart.addSeries(CandlestickSeries);\nseries.setData([/* ... OHLC data ... */]);\n\n// Initialize drawing manager\nconst manager = new DrawingManager();\nmanager.attach(chart, series, container);\n\n// Listen for events\nmanager.on('drawing:selected', (event) => {\n  console.log('Selected:', event.drawingId);\n});\n\n// Add drawings programmatically\nconst support = new HorizontalLine('support', [\n  { time: '2024-01-01' as any, price: 95 },\n], { lineColor: '#26a69a', lineWidth: 1 });\n\nmanager.addDrawing(support);\n\n// Select, deselect, remove\nmanager.selectDrawing('support');\nmanager.deselectAll();\nmanager.removeDrawing('support');\n\n// Export/import drawings as JSON\nconst json = manager.exportDrawings();\n// manager.importDrawings(json, factory);\n\n// Access the tool registry for all 68 tool definitions\nconst registry = getToolRegistry();\nconst allTools = registry.getAllTools();\n```\n\n## Available Drawing Tools (68)\n\n### Lines\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Trend Line | `TrendLine` | 2 |\n| Ray | `Ray` | 2 |\n| Info Line | `InfoLine` | 2 |\n| Extended Line | `ExtendedLine` | 2 |\n| Trend Angle | `TrendAngle` | 2 |\n| Horizontal Line | `HorizontalLine` | 1 |\n| Horizontal Ray | `HorizontalRay` | 1 |\n| Vertical Line | `VerticalLine` | 1 |\n| Cross Line | `CrossLine` | 1 |\n\n### Channels\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Parallel Channel | `ParallelChannel` | 3 |\n| Regression Trend | `RegressionTrend` | 2 |\n| Flat Top/Bottom | `FlatTopBottom` | 3 |\n| Disjoint Channel | `DisjointChannel` | 4 |\n\n### Pitchforks\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Andrews Pitchfork | `AndrewsPitchfork` | 3 |\n| Schiff Pitchfork | `SchiffPitchfork` | 3 |\n| Modified Schiff Pitchfork | `ModifiedSchiffPitchfork` | 3 |\n| Inside Pitchfork | `InsidePitchfork` | 3 |\n\n### Fibonacci\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Fib Retracement | `FibRetracement` | 2 |\n| Fib Extension | `FibExtension` | 3 |\n| Fib Channel | `FibChannel` | 3 |\n| Fib Time Zone | `FibTimeZone` | 2 |\n| Fib Speed Fan | `FibSpeedFan` | 2 |\n| Fib Time Extension | `FibTimeExtension` | 3 |\n| Fib Circles | `FibCircles` | 2 |\n| Fib Spiral | `FibSpiral` | 2 |\n| Fib Arcs | `FibArcs` | 2 |\n| Fib Wedge | `FibWedge` | 3 |\n| Pitchfan | `Pitchfan` | 3 |\n\n### Gann\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Gann Box | `GannBox` | 2 |\n| Gann Fan | `GannFan` | 2 |\n| Gann Square Fixed | `GannSquareFixed` | 1 |\n| Gann Square | `GannSquare` | 2 |\n\n### Forecasting & Measurement\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Long Position | `LongPosition` | 3 |\n| Short Position | `ShortPosition` | 3 |\n| Forecast | `Forecast` | 2 |\n| Bars Pattern | `BarsPattern` | 3 |\n| Projection | `Projection` | 3 |\n| Price Range | `PriceRange` | 2 |\n| Date Range | `DateRange` | 2 |\n| Date & Price Range | `DatePriceRange` | 2 |\n\n### Shapes\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Rectangle | `Rectangle` | 2 |\n| Rotated Rectangle | `RotatedRectangle` | 3 |\n| Circle | `Circle` | 2 |\n| Triangle | `Triangle` | 3 |\n| Ellipse | `Ellipse` | 2 |\n| Arc | `Arc` | 3 |\n| Path | `Path` | 2+ |\n| Polyline | `Polyline` | 2+ |\n| Curve | `Curve` | 4 |\n| Double Curve | `DoubleCurve` | 3 |\n\n### Annotations\n\n| Tool | Export | Anchors |\n|------|--------|---------|\n| Text | `TextAnnotation` | 1 |\n| Callout | `Callout` | 2 |\n| Anchored Text | `AnchoredText` | 2 |\n| Note | `Note` | 1 |\n| Price Note | `PriceNote` | 1 |\n| Price Label | `PriceLabel` | 1 |\n| Flag Mark | `FlagMark` | 1 |\n| Pin | `Pin` | 1 |\n| Comment | `Comment` | 1 |\n| Signpost | `Signpost` | 1 |\n| Table | `Table` | 1 |\n| Brush | `Brush` | 2+ |\n| Highlighter | `Highlighter` | 2+ |\n| Arrow | `Arrow` | 2 |\n| Arrow Marker | `ArrowMarker` | 1 |\n| Arrow Mark Up | `ArrowMarkUp` | 1 |\n| Arrow Mark Down | `ArrowMarkDown` | 1 |\n\n## Architecture\n\nEach drawing tool follows a two-class pattern:\n\n- **Tool class** (e.g. `TrendLine`) - extends `Drawing`, holds anchors/state, implements hit testing and geometry computation\n- **Pane view** (e.g. `TrendLinePaneView`) - implements `IPrimitivePaneView` from lightweight-charts, handles canvas rendering\n\nThe `DrawingManager` orchestrates lifecycle, selection, drag-editing, and event emission.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}