Chart Colors & Watermarks

Dynamic Theme Syncing

The core canvas rendering loop in charting_library.js dynamically evaluates the parent theme configuration by checking the class list of the body element:

// In the render loop:
const isLight = document.body.classList.contains('light-theme');
ctx.fillStyle = isLight ? '#ffffff' : '#131722';
ctx.fillRect(0, 0, W, H);

To synchronize chart background colors manually with pure black theme styles, add CSS rules targeting the chart mount elements:

/* Override theme background variables inside C:\backtestx_lightweight_chart\src\index.css */
body.dark-theme {
  --background-color: #000000;
  --border-color: #1a1a1a;
}

Grid Customization

Grid lines are drawn behind series plots. You can customize grid line styles inside the decoded bundle scale file. Dash configurations are set via standard canvas patterns:

// Customizing vertical or horizontal grids
ctx.strokeStyle = isLight ? '#e0e3eb' : '#1e222d';
ctx.lineWidth = 0.5;
ctx.setLineDash([2, 4]); // 2px line, 4px empty space

Watermarks Configuration

Watermarks show symbol metrics as large transparent backgrounds. Developers configure this in custom-watermark.js:

// C:\backtestx_lightweight_chart\custom-watermark.js
window.ChartingAPI.setWatermark({
  show: true,                                  // Toggle overall visibility
  watermarkMode: 'always',                     // Display conditions ('always' | 'replay' | 'none')
  watermarkColor: 'rgba(255, 255, 255, 0.08)', // Adapted automatically by theme
  showWatermarkTicker: true,                   // Show symbol name (e.g. BTC)
  showWatermarkDescription: true,              // Show description (e.g. Bitcoin / USD)
  showWatermarkInterval: true,                 // Show timeframe (e.g. 30m)
  
  // Explicit overrides if you want static texts:
  symbol: 'BTC',
  interval: '30m'
});