Backtestx Chart

A premium, high-performance HTML5 Canvas charting library engine with built-in mobile touch support, technical indicators, drawing tools, custom coordinate scale templates, crosshairs, and watermark branding badges.

Features

• 📱 Mobile First: Built-in pinch-to-zoom, relative touchpad-style dragging, scale dragging, and double-tap resets.
• 🚀 Zero Dependencies: Pure HTML5 Canvas rendering engine compiled as a single standalone production script.
• 🔌 Plug & Play Templates: Separate configuration files allowing developers to easily register custom indicator lines, drawing tools, watermark logos, intervals, and scales.
• 🎯 Stable Timescales: Dynamic step offsets and locking intervals that prevent flickering or jumping dates during pan/drag operations.
• 🎨 Theme Aware: Supports light and dark mode switches out of the box with custom coordinate badges.

Installation & CDN

Option 1: Load via unpkg CDN (Recommended)

You can directly link the compiled standalone bundle in your HTML page:

<script src="https://unpkg.com/backtestx-chart/dist/backtestx-chart.standalone.js"></script>

Option 2: Local Install

Install the package into your project:

npm install backtestx-chart

Quick Start

Create a container element in your HTML and load the chart:

<div id="chart-container" style="width: 100%; height: 500px;"></div>

<script src="https://unpkg.com/backtestx-chart/dist/backtestx-chart.standalone.js"></script>
<script>
  // Initialize the chart
  const chart = LightweightCharts.createChart('chart-container', {
    resolution: '1D',
    horizontalScale: 'time', // 'time', 'yield-curve', or 'strike-price'
  });

  // Supply candle/bar data
  chart.bars = [
    { time: 1718222400000, open: 67345.50, high: 68120.00, low: 67200.25, close: 67900.00, volume: 1200 },
    { time: 1718308800000, open: 67900.00, high: 68450.75, low: 67500.00, close: 68230.10, volume: 1350 }
  ];

  // Draw chart series
  chart.render();
</script>

Developer Customizations

You can load separate developer template scripts to override default styles and behavior:

• custom-crosshair.js: Configure crosshair colors, width, line-dashes, and axis tooltip styles.
• custom-pricescale.js: Configure Y-axis price label fonts, color, backgrounds, and vertical divider style.
• custom-timescale.js: Configure X-axis timescale label fonts, color, backgrounds, and horizontal divider style.
• custom-indicator.js: Register custom technical indicators (overlays and subpanel panes).
• custom-watermark-logo.js: Setup custom badge brand watermark image url and redirect destination.

Build Commands

To recompile or package modifications:

• obfuscated split bundles (used for standard site loaders):

  npm run build

• standalone bundle (used for CDN or single script embeds):

  npm run build:standalone

License

MIT