Version: 1.0.0

Chart types

Backtestx Charts features a pluggable, high-performance charting architecture supporting time-series coordinate grids, yield curve maturity term mappings, and options strike price scaling.

Standard Time-based Chart

The standard default layout plots data points against a linear horizontal **Time Scale** (x-axis) and a vertical **Price Scale** (y-axis). Ideal for candlestick tickers and live updates.

TIME BASED CHART

const chart = new window.BacktestxChart('chart-mount', {
  symbol: 'BTCUSD',
  resolution: '30m',
  datafeed: datafeed
});

Yield Curve Chart

Plots bond interest yields against debt maturity terms (1M, 3M, 2Y, 10Y, 30Y). Configuring the scale automatically loads the term x-axis mapping and centers yield values.

YIELD CURVE CHART

const chart = new window.BacktestxChart('chart-mount', {
  symbol: 'US Treasury Yields',
  horizontalScale: 'yield-curve'
});

// Pass cross-sectional maturity terms
chart.bars = [
  { maturity: '1M', yield: 5.30 },
  { maturity: '10Y', yield: 4.25 },
  { maturity: '30Y', yield: 4.38 }
];
chart.resetView();

Option Strike Price Chart

Plots contract bid/ask valuations against discrete strike price indices (e.g., $95.00, $100.00, $105.00). Ideal for monitoring option price profiles and implied volatility sweeps.

OPTION STRIKE CHART

const chart = new window.BacktestxChart('chart-mount', {
  symbol: 'BTC Options',
  horizontalScale: 'strike-price'
});

chart.bars = [
  { strike: 95.00, price: 4.50 },
  { strike: 100.00, price: 2.10 },
  { strike: 105.00, price: 0.80 }
];
chart.resetView();

Continuous Line Series Renderer

While candlestick bars represent open/close boundaries, curve plots (such as yield structures or pricing bounds) require continuous visual displays. Assigning the `'line'` series renderer renders a continuous path connecting data vertices:

LINE SERIES RENDERER

// Apply continuous line series render layout
chart.customDrawCandles = window.ChartingAPI.getCandleRenderer('line');
chart.render();

Developer API: Extending Scales & Renderers

Backtestx Charts provides a powerful, modular global API (window.ChartingAPI) that allows developers to dynamically register custom horizontal scales, custom series renderers, technical indicators, and drawing tools.

1. Registering a Custom Horizontal Scale

Custom horizontal scales delegate timeline mapping, grid line positioning, and tooltip rendering to your own helper object. To register one, define a scale helper containing translation and rendering methods:

REGISTERING CUSTOM SCALE

window.ChartingAPI.registerHorizontalScale('my-custom-scale', {
  barToX: (chart, i) => {
    const slot = chart.candleWidth + chart.candleGap;
    return chart.offset + i * slot + chart.candleWidth / 2;
  },
  xToBar: (chart, x) => {
    const slot = chart.candleWidth + chart.candleGap;
    return Math.round((x - chart.offset - chart.candleWidth / 2) / slot);
  },
  getVisibleRange: (chart) => {
    const chartW = chart.logicalWidth - chart.paddingRight;
    const slot = chart.candleWidth + chart.candleGap;
    const startIndex = Math.floor((-slot - chart.offset - chart.candleWidth / 2) / slot);
    const endIndex = Math.ceil((chartW + slot - chart.offset - chart.candleWidth / 2) / slot);
    return { startIndex, endIndex };
  },
  drawTimeScale: (chart, ctx, chartH) => { /* Custom rendering logic */ },
  drawTimeBadge: (chart, ctx, chartH) => { /* Custom hover rendering logic */ }
});

2. Registering a Custom Candle/Series Renderer

Custom renderers allow you to draw unique series structures (like lines, mountains, columns, or custom clouds) onto the chart canvas in place of standard candlesticks:

REGISTERING CUSTOM RENDERER

window.ChartingAPI.registerCandleType('mountain', (ctx, visible, slot, bodyW, chartH, priceToY, colors, xOffset, chart) => {
  ctx.save();
  ctx.beginPath();
  // Iteratively map and draw a custom shaded area path...
  ctx.restore();
});

Scale Comparison

A quick comparison of coordinates support across scales:

Scale Name	X-Axis Coordinates	Main Visual Renderers	Zoom / Pan Support
Time Scale	Date / Time (unix)	Candles, Hollow, Heikin-Ashi, OHLC Bars	Yes (Websocket streaming buffers)
Yield Curve Scale	Maturity Periods (1M - 30Y)	Line, custom scatter indicators	Yes (Static snap scroll limits)
Strike Price Scale	Strike Values (USD)	Line, dots, indicators	Yes (Centered bounds clamping)