Version: 1.0.0

Legends

Create an interactive HTML legend overlay that tracks crosshair movement and displays real-time candle data.

Introduction

Legends display vital market information such as Open, High, Low, Close (OHLC), change percentage, and volume coordinates. Since legends need custom markup (e.g. layouts, color codes for positive/negative change), they are best built as standard HTML overlays floating on top of the chart canvas container.

HTML Overlay Layout

Position a container absolute inside a relative chart wrapper:

<div class="relative w-full h-[500px]">
  <!-- Floating Legend overlay -->
  <div id="chart-legend" class="absolute top-4 left-4 z-10 font-mono text-xs flex gap-3 text-zinc-400 pointer-events-none">
    <span class="font-bold text-white" id="legend-symbol">BTCUSD</span>
    <span>O: <span id="legend-open" class="text-green-500">0.00</span></span>
    <span>H: <span id="legend-high" class="text-green-500">0.00</span></span>
    <span>L: <span id="legend-low" class="text-green-500">0.00</span></span>
    <span>C: <span id="legend-close" class="text-green-500">0.00</span></span>
  </div>

  <!-- Chart container mount -->
  <div id="chart-mount" class="w-full h-full"></div>
</div>

Subscribing to Cursor Movements

Listen to crosshair coordinates and update the DOM nodes. Use chart.subscribeCrosshairMove:

// Update logic helper
function updateLegend(bar) {
  if (!bar) return;
  const isUp = bar.close >= bar.open;
  const colorClass = isUp ? 'text-green-500' : 'text-red-500';

  const oNode = document.getElementById('legend-open');
  const hNode = document.getElementById('legend-high');
  const lNode = document.getElementById('legend-low');
  const cNode = document.getElementById('legend-close');

  // Apply values
  oNode.innerText = bar.open.toFixed(2);
  hNode.innerText = bar.high.toFixed(2);
  lNode.innerText = bar.low.toFixed(2);
  cNode.innerText = bar.close.toFixed(2);

  // Apply coloring
  [oNode, hNode, lNode, cNode].forEach(node => {
    node.className = colorClass;
  });
}

// Subscribe to events
chart.subscribeCrosshairMove((param) => {
  if (!param.point || !param.seriesData || param.seriesData.length === 0) {
    // User cursor left the chart, show last bar data
    const lastBar = chart.bars[chart.bars.length - 1];
    updateLegend(lastBar);
    return;
  }
  
  // Find current bar under crosshair
  const bar = param.seriesData[0];
  updateLegend(bar);
});

Styling & Responsive Layout

Ensure that your legend container uses pointer-events-none. This prevents the legend container from blocking drag-and-drop operations on the canvas under it.

For responsive screens, hide details like volume or specific descriptions using responsive tailwind configurations:

<span class="hidden sm:inline">Vol: <span id="legend-vol">0</span></span>