Version: 1.0.0

Custom crosshair

The CustomCrosshair module exposes the crosshair appearance settings — line color, width, dash pattern, and coordinate badge styling — via the ChartingAPI.

Overview

Edit custom-crosshair.js to call window.ChartingAPI.setCrosshairSettings(). Leave color fields empty to use automatic theme-aware colors.

Settings API

window.ChartingAPI.setCrosshairSettings({
  color: 'rgba(239, 83, 80, 0.4)', // Crosshair line color
  width: 0.8, // Line thickness in pixels
  dashArray: [3, 3], // Dash pattern [dash, gap]
  showPriceBadge: true, // Toggle Y-axis price badge
  showTimeBadge: true, // Toggle X-axis time badge
  badgeBgColor: '#2962ff', // Badge background color
  badgeTextColor: '#ffffff' // Badge text color
});

Options Reference

Option	Type	Description
color	string	Crosshair line color. Leave empty for auto theme colors.
width	number	Line thickness in pixels (e.g. `0.8`).
dashArray	number[]	Dash/gap pattern, e.g. `[3, 3]`.
showPriceBadge	boolean	Toggle Y-axis price coordinate badge.
showTimeBadge	boolean	Toggle X-axis time coordinate badge.
badgeBgColor	string	Background color for coordinate badges.
badgeTextColor	string	Text color inside coordinate badges.