Plugin development
Plugins let you extend Lightweight Charts™ with your own functionality: new series types, drawing tools, indicators, watermarks, and other custom elements rendered as part of the chart. This section explains how plugins work and how to build your own.
Choosing a plugin type
| You want to build | Plugin type | Attach with |
|---|---|---|
| A drawing tool, annotation, or overlay tied to a series and its scales | Series primitive | ISeriesApi.attachPrimitive |
| A pane-wide element independent of any series, such as a watermark | Pane primitive | IPaneApi.attachPrimitive |
| A new way to draw data: a series with its own data structure and rendering | Custom series | addCustomSeries |
tip
If your element visualizes its own data, build a custom series; if it decorates a series or reacts to its scales, build a series primitive; if it belongs to the pane as a whole, build a pane primitive. Series primitives can also render on the price and time scales; pane primitives cannot.
Development workflow
- Scaffold a project. Run
npm create lwc-plugin@latest— the create-lwc-plugin package generates a ready-to-run project for the plugin type you choose. - Implement the plugin interface. Follow the article for your plugin type from the table above.
- Render on the canvas. Draw in the right coordinate space with Canvas rendering target, and keep lines crisp with the Pixel perfect rendering techniques.
- Learn from working code. The
Plugin examples demo
hosts interactive examples of heatmaps, alerts, watermarks, and tooltips;
their sources live in the
plugin-examplesfolder of the repository.