Version: 1.0.0

Watermark

Embed background branding layers displaying symbol tickers, resolutions, and replay indicators.

Introduction

Watermarks overlay text identifiers (e.g. ticker name, active timeframe, warning labels) in the background behind the grid lines and wicks.

API Configuration

Configure the watermark settings using the ChartingAPI.setWatermark script as illustrated in custom-watermark.js:

window.ChartingAPI.setWatermark({
  show: true,                                   // Toggle visibility
  watermarkMode: 'always',                      // 'always' | 'replay' | 'none'
  watermarkColor: 'rgba(255, 255, 255, 0.08)',  // Text coloring
  showWatermarkTicker: true,                    // Toggle symbol name
  showWatermarkDescription: true,               // Toggle asset name description
  showWatermarkInterval: true,                  // Toggle resolution
  showWatermarkReplay: true,                    // Toggle warning when replay active
  symbol: 'BTC',                                // Override symbol
  interval: '3m'                                // Override resolution
});

Watermark Rendering Module

The watermark background text layout calculations from the Backtestx library:

// Snippet from water-marks.js
const wmMode = settings.watermarkMode || 'always';
const isReplayMode = chart.replayActive || chart.replaySelecting || false;
const showWm = wmMode === 'always' || (wmMode === 'replay' && isReplayMode);
if (!showWm) return;

ctx.save();
const isLight = document.body.classList.contains('light-theme');
let watermarkColor = settings.watermarkColor || (isLight ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.08)');

ctx.fillStyle = watermarkColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// Scales automatically based on available canvas viewport space
let scaleFactor = Math.min(1.0, Math.max(0.28, chartW / 750));
const tickerSize = Math.floor(100 * scaleFactor);
const descSize = Math.floor(22 * scaleFactor);

// Prints items aligned centered vertically
ctx.font = `bold ${tickerSize}px Inter, Arial, sans-serif`;
ctx.fillText(chart.symbol, chartW / 2, chartH / 2);
ctx.restore();

Supported Parameters

Updating the watermark config via ChartingAPI automatically clears and repaints the chart canvas to reflect the changes in real-time.