Function formatCandlestickRowHtml

src/components/formatTooltip.ts:92–132

(params: TooltipParams)

}

function formatCandlestickRowHtml(params: TooltipParams): string {
  const [, open, close, low, high] = params.value as readonly [number, number, number, number, number];
  
  const safeName = escapeHtml(resolveSeriesName(params));
  const safeColor = escapeHtml(sanitizeCssColor(params.color));

  // Format OHLC values
  const openStr = formatNumber(open);
  const highStr = formatNumber(high);
  const lowStr = formatNumber(low);
  const closeStr = formatNumber(close);
  
  // Determine direction and arrow
  const isUp = close > open;
  const arrow = isUp ? '\u25B2' : '\u25BC'; // ▲ or ▼
  const arrowColor = isUp ? '#22c55e' : '#ef4444';
  const percentChange = formatPercentChange(open, close);

  const ohlcText = `O: ${openStr} H: ${highStr} L: ${lowStr} C: ${closeStr}`;
  const safeOHLC = escapeHtml(ohlcText);
  const safeArrow = escapeHtml(arrow);
  const safePercent = escapeHtml(percentChange);
  const safeArrowColor = escapeHtml(arrowColor);

  return [
    '<div style="display:flex;flex-direction:column;gap:4px;">',
    // Series name row
    '<div style="display:flex;align-items:center;gap:8px;">',
    `<span style="width:8px;height:8px;border-radius:999px;flex:0 0 auto;background-color:${safeColor};"></span>`,
    `<span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;">${safeName}</span>`,
    '</div>',
    // OHLC values row
    `<div style="font-variant-numeric:tabular-nums;white-space:nowrap;font-size:0.9em;">${safeOHLC}</div>`,
    // Change row with arrow
    '<div style="display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;">',
    `<span style="color:${safeArrowColor};font-weight:700;">${safeArrow}</span>`,
    `<span style="color:${safeArrowColor};font-weight:600;">${safePercent}</span>`,
    '</div>',
    '</div>',
  ].join('');
}

/**
 * Default tooltip formatter for candlestick series in item mode.