Drawings

You create drawings with a public tool name, and each drawing gets a source ID and a set of time/price points. The chart draws them and handles mouse and touch interaction. Your app decides what to draw and with what data.

Create a trend lineCopy Anchor Link

const chart = widget.activeChart();
const id = chart.createMultipointShape([
  { time: 1790035200, price: 180 },
  { time: 1791676800, price: 195 },
], { shape: 'trend_line' });
if (id === null) throw new Error('Drawing creation failed');

Drawing timestamps are in Unix seconds. That's different from Bar.time, which uses milliseconds. Give each tool the number of points it needs, using finite numbers. Use createShape for single-point tools, and the supported anchored API for tools pinned to the screen.

Edit or removeCopy Anchor Link

Get a drawing's handle with getShapeById(id), then use its supported point and property methods. Remove a drawing with removeEntity(id). Don't hold on to a handle after the drawing is removed or a different saved layout is loaded.

Interaction flagsCopy Anchor Link

Selection, locking, saving, editing and Object Tree visibility are each controlled separately. For example, a locked drawing can still be saved, and an overlay marked as not saved must stay unsaved. Keep these flags where the docs put them, not mixed in with style properties.

The chart rejects invalid property keys and broken saved data. Read drawing storage before you save drawings in your own format.

Selection, groups and orderingCopy Anchor Link

Use the chart's selection and group controller APIs to work with drawings by their IDs. Groups help you organize related drawings, but they don't decide which symbol a drawing belongs to.

SelectionCopy Anchor Link

Each chart has its own selection. Change or clear it with the public selection handle. Drawings that have selection turned off shouldn't show up when users select things. Subscribe with the documented subscription object, and unsubscribe with the same owner and callback you used.

Groups and stacking orderCopy Anchor Link

Only group drawings that fit together and live in the same chart. To group drawings or move them to the front or back, use the public group controller and ordering commands. Don't edit saved source arrays directly. Before you show an ordering action, check that it's available, since some may be disabled.

Sharing across chartsCopy Anchor Link

When layouts are saved or loaded, drawing sharing and symbol ownership are sorted out for you. IDs are only unique within one chart. Restoring a saved layout can change IDs and sync copies of a drawing, so get fresh handles after a restore rather than reusing old ones.

Host trading overlaysCopy Anchor Link

Order lines, position lines and execution shapes show trading activity on the chart. They're visual only: they don't place orders with a broker.

const order = widget.activeChart().createOrderLine();
order.setPrice(190).setText('Limit order').setQuantity('10');
// When the host order is removed:
// order.remove();

Your app stays in chargeCopy Anchor Link

Your broker or order system is the source of truth. When a user moves or cancels a line, check the change with your backend first. Update the real order only after that succeeds. If it's rejected, put the line back where it should be.

When to remove overlaysCopy Anchor Link

Remove an overlay when its order or position goes away, the symbol changes, or the chart is destroyed. Keep each listener tied to its own order. Don't add the same overlay again every time data refreshes.

Saving and PnLCopy Anchor Link

Don't save temporary broker overlays into a user's analysis unless you mean to. Your app is responsible for PnL in the account currency and for how broker executions work. The line on the chart doesn't do any accounting.

Order handle · Position handle · Execution handle