Version: 1.0.0

Adding a Second Series (Indicators)

The chart engine supports adding overlays (e.g. EMAs/SMAs) or plotting separate indicators in sub-panels (e.g. RSI/MACD) beneath the main chart.

Indicator Registration

Technical indicators are registered using the public ChartingAPI:

// Registering a technical indicator
window.ChartingAPI.registerIndicator('rsi', {
  name: 'Relative Strength Index',
  type: 'pane', // 'pane' renders below, 'overlay' renders on candles
  params: { period: 14 },
  calculate: function(bars, params) {
    // Return array of computed indicator values
  },
  render: function(ctx, chart, values, layout, color) {
    // Draw indicator lines using canvas context
  }
});

Overlay vs Pane Indicators

Overlay Indicators (e.g. EMA, SMA)

Rendered on the main chart pane. Clipped to the main candlestick viewport using a canvas clipping mask.

Pane Indicators (e.g. RSI, MACD)

Rendered in dedicated panels at the bottom. The height of the main chart is dynamically adjusted to make room.

Levels & Legends

Sub-panels automatically calculate and draw horizontal boundary lines (like RSI levels 30 and 70) and legends showing active indicators:

// In charting_library.js:
ctx.fillText(`${x.ind.name}: ${displayValStr}`, 10, panelY + 6); // Renders name & value