Series Markers

Introduction

Series markers place graphical cues (like upward arrows, downward flags, or dot highlights) directly above or below wicks. This is critical for backtesting algorithms and technical signal overlays.

Data Format

Markers are objects containing a time-index mapping, vertical placement constraints, colors, shapes, and tooltip text tags:

const buySignal = {
  time: 1781100000,          // Timestamp matching a bar's time
  position: 'belowBar',      // 'belowBar' | 'aboveBar' | 'inBar'
  color: '#26a69a',          // Hex or RGBA value
  shape: 'arrowUp',          // 'arrowUp' | 'arrowDown' | 'circle' | 'square'
  text: 'BUY ENTRY @ $67,200' // Text label overlay
};

Adding Markers via JS

Load an array of signal annotations and apply them using setMarkers:

const activeMarkers = [
  { time: 1781010000, position: 'belowBar', color: '#26a69a', shape: 'arrowUp', text: 'BUY' },
  { time: 1781050000, position: 'aboveBar', color: '#ef5350', shape: 'arrowDown', text: 'SELL' }
];

// Apply markers array to candlestick series
candleSeries.setMarkers(activeMarkers);

Supported Shapes

The rendering engine draws each shape centered relative to its respective candle wick:

• arrowUp: Upward-pointing triangle offset below the low coordinate of the bar.
• arrowDown: Downward-pointing triangle offset above the high coordinate of the bar.
• circle: Center dot highlight mapped directly on top of coordinates.
• square: Block tag highlighting specific nodes.