Version: 1.0.0

Drawing Tools Integration

Wire custom layout panels and drawing buttons enabling users to annotate wicks on the canvas.

Overview

Drawing tools allow users to place lines, rays, or highlighting zones directly over price trends. This guide documents how drawing event parameters are configured.

Custom Drawing Registry

Use the ChartingAPI.registerCustomDrawing hook to map click counts and rendering routines for custom annotations as described in custom-drawings.js:

// Example registering a buy marker drawing
window.ChartingAPI.registerCustomDrawing('buy_marker', {
  clicks: 1, // Number of clicks required to place the marker
  render: function(ctx, points, chart) {
    if (points.length < 1) return;
    const p1 = points[0];
    const x = chart.barToX(p1.barIndex);
    const minMax = chart.getVisibleMinMax();
    const y = chart.priceToY(p1.price, minMax.minPrice, minMax.maxPrice);

    ctx.save();
    ctx.fillStyle = '#26a69a'; // green fill
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - 8, y + 12);
    ctx.lineTo(x + 8, y + 12);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
});

Wiring Toolbar Buttons

Link drawing tools to buttons in your HTML sidebar toolbar using click event listeners:

document.getElementById('btn-buy-marker').addEventListener('click', () => {
  chart.setSelectedDrawingTool('buy_marker');
});