https://github.com/tpunt/lwc-plugin-shape-drawing
A plugin for the Lightweight Charts library to create shapes
https://github.com/tpunt/lwc-plugin-shape-drawing
Last synced: 4 months ago
JSON representation
A plugin for the Lightweight Charts library to create shapes
- Host: GitHub
- URL: https://github.com/tpunt/lwc-plugin-shape-drawing
- Owner: tpunt
- Created: 2025-08-22T09:38:38.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-08-25T13:33:45.000Z (5 months ago)
- Last Synced: 2025-08-25T15:37:22.494Z (5 months ago)
- Language: TypeScript
- Size: 23.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## Visual Demo
## Running Locally
```shell
npm install
npm run dev
```
Visit `localhost:5173` in the browser.
## Code Example
```js
// 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.
https://github.com/user-attachments/assets/97dc1993-6dd6-4c50-b951-a008db28c577