Version: 1.0.0

Custom candle type

The CustomCandleType module allows developers to register entirely custom canvas-based candle renderers, replacing or extending the built-in drawing logic.

Overview

Custom renderers are registered via window.ChartingAPI.registerCandleType(id, fn). Once registered, the chart can use that renderer by setting chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('your_id') and calling chart.render().

Renderer Function Signature

The renderer receives these arguments:

Parameter	Description
ctx	HTML5 CanvasRenderingContext2D for drawing.
visibleBars	Array of bar objects: `{ time, open, high, low, close, volume }`.
slot	Total pixel width allocated per candle (including gap).
bodyW	Calculated candle body pixel width.
chartH	Total height in pixels of the price scale clip area.
priceToY	Helper function `(price) => y` for coordinate conversion.
themeColors	Active theme colors: `{ bullColor, bearColor }`.
xOffset	Starting X canvas position for the first visible bar.
chartInstance	The chart widget context for additional API access.

Area Series Example

The built-in custom-candle-type.js ships with a premium area renderer as an example:

// Register a custom area renderer
window.ChartingAPI.registerCandleType('area', function(ctx, visibleBars, slot, bodyW, chartH, priceToY, T, xOffset, state) {
  // 1. Draw gradient fill below the line
  const gradient = ctx.createLinearGradient(0, 0, 0, chartH);
  gradient.addColorStop(0, 'rgba(38, 166, 154, 0.45)');
  gradient.addColorStop(1, 'rgba(38, 166, 154, 0.00)');
  // 2. Draw stroke line on top with vertex circles
  ctx.strokeStyle = '#26a69a';
  ctx.lineWidth = 2.5;
});

// Activate it on the chart
chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('area');
chart.render();