Version: 1.0.0

Finishing Touches (Drawings & Persistence)

The finishing touches guide details how to build custom drawing overlays, append top toolbar buttons, and configure LocalStorage persistence.

Custom Drawings

Multi-click drawing annotations are registered in custom-drawings.js using the ChartingAPI:

// Register a custom 1-click drawing tool (Buy Marker)
window.ChartingAPI.registerCustomDrawing('buy_marker', {{
  clicks: 1,
  render: function(chart, ctx, d, minPrice, maxPrice, isSelected) {{
    const x = chart.barToX(d.p1.idx);
    const y = chart.priceToY(d.p1.price, minPrice, maxPrice);
    
    ctx.save();
    ctx.fillStyle = isSelected ? '#ff9800' : '#26a69a';
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x - 8, y + 12);
    ctx.lineTo(x + 8, y + 12);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }},
  hitTest: function(chart, mouseX, mouseY, d, minPrice, maxPrice) {{
    // Return point name if hit, or null if missed
  }}
}});

Custom Buttons

Developers can register custom action buttons in the top header toolbar using the toolbar registrar in custom-buttons.js:

// C:\backtestx_lightweight_chart\custom-buttons.js
window.ChartingAPI.registerTopToolbarButton('reset_view_action', {{
  label: 'Reset View',
  tooltip: 'Reset chart zoom and position',
  alignment: 'right',
  iconSvg: '

Drawing Storage

Drawing paths can be persisted inside the user's LocalStorage automatically across page loads:

// Save current drawings:
window.ChartingAPI.saveDrawings(chart);

// Load drawings from LocalStorage:
window.ChartingAPI.loadDrawings(chart);