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.
tip
Looking for a ready-made plugin instead of building one? Browse the plugin catalog.
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. The wizard also offers to install the plugin-authoring Agent Skill, which teaches AI coding assistants how to write Lightweight Charts™ plugins. - 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.