Version: 1.0.0

Custom Candle Styles

Build custom wicks and color outline styles (Heikin Ashi or Hollow Candles) using custom canvas renderers.

Overview

Custom candlestick styles (such as Heikin Ashi, Hollow candles, or Bar-only grids) are supported by registering custom renderer functions via the Charting API.

Hollow Candle Renderer

Hollow candles draw bullish candles (close > open) as outlines with hollow bodies, and bearish candles as solid filled bodies:

// Example custom hollow candle draw loop
function drawHollowCandles(ctx, visibleBars, slot, bodyW, priceToY, themeColors, xOffset) {
  ctx.save();
  visibleBars.forEach((bar, idx) => {
    const x = xOffset + idx * slot + slot / 2;
    const yOpen = priceToY(bar.open);
    const yClose = priceToY(bar.close);
    const yHigh = priceToY(bar.high);
    const yLow = priceToY(bar.low);

    const isBull = bar.close >= bar.open;
    ctx.strokeStyle = isBull ? themeColors.bullColor : themeColors.bearColor;
    ctx.fillStyle = themeColors.bearColor;
    ctx.lineWidth = 1;

    // Draw wicks
    ctx.beginPath();
    ctx.moveTo(x, yHigh);
    ctx.lineTo(x, yLow);
    ctx.stroke();

    // Draw body
    const top = Math.min(yOpen, yClose);
    const h = Math.max(1, Math.abs(yClose - yOpen));
    if (isBull) {
      // Hollow body outline
      ctx.strokeRect(x - bodyW / 2, top, bodyW, h);
    } else {
      // Solid filled body
      ctx.fillRect(x - bodyW / 2, top, bodyW, h);
    }
  });
  ctx.restore();
}

Registering Custom Renderers

if (window.ChartingAPI) {
  window.ChartingAPI.registerCandleType('hollow_candles', drawHollowCandles);
}