Version: 1.0.0

Series

This article describes supported series types and ways to customize them.

Supported types

Candlestick

Series Definition: candlestick
Data Format: Standard bars carrying Open, High, Low, Close (OHLC) values and Volume.
Style Options: Configured via properties under chartSettings.symbol.

This is the default series type. Solid candle bodies and high/low wicks are drawn for each kline bar based on price parameters.

JAVASCRIPT

// Instantiated by default on chart startup
const chart = new window.BacktestxChart('chart-mount', {
  symbol: 'BTCUSD',
  resolution: '30m',
  datafeed: datafeed,
  chartSettings: {
    symbol: {
      showBody: true,
      showWick: true,
      showBorders: true,
      bodyBull: '#26a69a',
      bodyBear: '#ef5350'
    }
  }
});

Hollow Candle

Series Definition: hollow_candle

Bullish candles (close >= open) are rendered hollow/transparent using borders and wicks, while bearish candles are filled solidly.

JAVASCRIPT

// Apply Hollow Candle rendering style
chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('hollow_candle');
chart.render();

Heikin Ashi

Series Definition: heikin_ashi

Computes Heikin-Ashi smoothed averages to highlight price trends by filtering out noise.

JAVASCRIPT

// Apply Heikin-Ashi rendering style
chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('heikin_ashi');
chart.render();

Bar

Series Definition: bar

Draws traditional OHLC bars consisting of vertical lines for price ranges, a left horizontal tick representing open, and a right tick representing close.

JAVASCRIPT

// Apply OHLC Bar rendering style
chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('bar');
chart.render();

Customization

You can customize standard candle structures by modifying options.chartSettings.symbol:

Property	Type	Default	Description
showBody	boolean	true	Toggles candlestick body fills.
showBorders	boolean	true	Toggles borders outlining candles.
showWick	boolean	true	Toggles wicks linking high/low boundaries.
bodyBull	string	"#26a69a"	Hex color for bullish candle bodies.
bodyBear	string	"#ef5350"	Hex color for bearish candle bodies.
borderBull	string	"#26a69a"	Hex color for bullish candle borders.
borderBear	string	"#ef5350"	Hex color for bearish candle borders.
wickBull	string	"#26a69a"	Hex color for bullish candle wicks.
wickBear	string	"#ef5350"	Hex color for bearish candle wicks.

Custom series renderers

JAVASCRIPT

window.ChartingAPI.registerCandleType('my_custom_candles', function(ctx, visibleBars, slot, bodyW, chartH, priceToY, themeColors, xOffset, chartInstance) {
  ctx.save();
  ctx.strokeStyle = '#ff9800'; // Custom orange color
  ctx.lineWidth = 1.5;
  
  visibleBars.forEach((bar, index) => {
    const x = xOffset + index * slot + slot / 2;
    const yOpen = priceToY(bar.open);
    const yClose = priceToY(bar.close);
    
    ctx.beginPath();
    ctx.moveTo(x, yOpen);
    ctx.lineTo(x, yClose);
    ctx.stroke();
  });
  ctx.restore();
});