Version: 1.0.0
Custom drawings
The CustomDrawings module enables registering fully custom drawing tools — from single-click markers to two-point price zones — with hit detection and drag support.
Overview
Drawings are registered via window.ChartingAPI.registerCustomDrawing(id, config). The toolbar auto-generates buttons for each registered drawing type. Two-click drawings show a live preview during placement.
Registering a Drawing
window.ChartingAPI.registerCustomDrawing('buy_marker', {
clicks: 1, // 1 for single-click, 2 for two-point drawings
render: function(chart, ctx, d, minPrice, maxPrice, isSelected) {
const x = chart.barToX(d.p1.idx);
const y = chart.priceToY(d.p1.price, minPrice, maxPrice);
// ... draw your shape
},
hitTest: function(chart, mouseX, mouseY, d, minPrice, maxPrice) {
// return 'p1', 'p2', 'line' if hit, or null
}
});
clicks: 1, // 1 for single-click, 2 for two-point drawings
render: function(chart, ctx, d, minPrice, maxPrice, isSelected) {
const x = chart.barToX(d.p1.idx);
const y = chart.priceToY(d.p1.price, minPrice, maxPrice);
// ... draw your shape
},
hitTest: function(chart, mouseX, mouseY, d, minPrice, maxPrice) {
// return 'p1', 'p2', 'line' if hit, or null
}
});
Drawing Config Schema
| Property | Required | Description |
|---|---|---|
| clicks | Yes | 1 or 2 — number of clicks to complete the drawing. |
| render | Yes | Canvas drawing function called each frame. |
| renderPreview | Optional | Live preview drawn between clicks (for 2-click tools). |
| hitTest | Yes | Returns 'p1', 'p2', 'line', or null for drag/select. |
| iconSvg | Optional | SVG string for the auto-generated toolbar button icon. |
Built-in Examples
- buy_marker: Single-click green up-triangle with "BUY" label. Draggable via
p1. - zone: Two-click semi-transparent horizontal price band with dashed boundaries. Draggable via
'line'.