Shape Drawing - Lightweight Charts™ Plugin

This plugin adds enables for arbitrary shapes to be drawn on the chart. It requires LWC version 5.0.0 or greater.

Shape features:

• Border styling: colour, width, style, visibility
• Fill styling: colour, opacity
• Ability to drag corners of shapes, or the whole shape
• Mutability: true (default) for interactivity (hovering/dragging), false for simply displaying the shape
• Hovering: change border width, change fill opacity, show a custom shape on the corners (square or circle) and set its size, detect when hovering over the fill and/or the borders of a shape
• Show/hide the time/price axis labels of the unique corners of a shape, including changing label/text colours and price/time formatters

See the ShapeDrawingOptions interface in ./src/options.ts for setting these properties.

Installation

npm install lwc-plugin-shape-drawing

Usage

import { ShapeDrawing, ShapeDrawingOptions } from 'lwc-plugin-shape-drawing';

Visual Demo

Code Example

import { ShapeDrawing } from 'lwc-plugin-shape-drawing';
import { LineStyle } from 'lightweight-charts';

// Draw a triangle
const shape1 = new ShapeDrawing(
	[
		{ price: 100, time: 1755856347 },
		{ price: 100, time: 1755856347 },
		{ price: 500, time: 1755846347 },
	],
	{
		fillColor: '#ff0',
		fillOpacity: 0.5,
		borderColor: '#0ff',
		borderWidth: 5,
		borderStyle: LineStyle.Dashed,
		showTimeAxisLabels: true,
		showPriceAxisLabels: true,
		labelColor: '#aaa',
		labelTextColor: '#000',
	},
);

lineSeries.attachPrimitive(shape1);

In ./src/example/example.ts, the following is shown:

The file also shows an implementation of interactive drawing via clicking on the chart. E.g.

demo.mov

Development

Building the Package

npm run compile

This will:

1. Compile TypeScript to JavaScript
2. Bundle the plugin for both ES modules and UMD
3. Generate TypeScript type definitions
4. Output everything to the dist/ folder

Running Locally

npm install
npm run dev

Visit localhost:5173 in the browser.