Crosshair Customization

Crosshair Rendering

Crosshair lines are rendered dynamically inside the primary render loop:

// Crosshair rendering inside charting_library.js:
if (this.isMouseOver && this.mousePos.x <= chartW) {
  ctx.strokeStyle = isLight ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
  ctx.lineWidth = 0.8;
  ctx.setLineDash([3, 3]); // Dashed line style
  
  // Snap X coordinate to the center of the hovered candlestick
  const hoverBarIdx = this.xToBar(this.mousePos.x);
  const snappedX = this.barToX(hoverBarIdx);
  
  // Draw vertical line
  ctx.beginPath();
  ctx.moveTo(snappedX, 0); ctx.lineTo(snappedX, chartH);
  ctx.stroke();
}

Coordinate Badges

When the crosshair is active, axis scale badges are drawn at the intersection coordinates:

• Y-Axis Badge: Draws a tag containing the exact price matching the mouse Y coordinate (delegated to window.DecodedScale.drawPriceBadge).
• X-Axis Badge: Draws a tag containing the date, maturity, or strike value matching the mouse X index.