Customization Introduction
Welcome to the customization guide. The Backtestx charting library is designed from the ground up for maximum layout control and raw rendering performance.
Core Architecture
Unlike many charting libraries packaged into rigid framework wrappers (like React-only or Vue-only components), the Backtestx Charting Engine is built using Vanilla ES6 Javascript rendering directly onto an HTML5 Canvas context.
The chart engine is defined as BacktestxChart, which inherits from a core layout manager class (BacktestxChartCore). This architecture guarantees:
- Zero UI Overhead: Direct DOM mounting without virtual DOM diffing cycles.
- High-Speed Paint Loop: Single canvas clearing and rendering operations run inside efficient batch draw routines.
- Portability: Standard javascript interface that integrates seamlessly in vanilla websites, modern bundlers (Vite/NextJS), and native WebView shells.
Customization Overview
Customization in Backtestx Charts is split into two primary layers:
1. Chart Options (Initialization)
Configured when creating the chart. Controls options like time scale types, candle body and wick colors, resolutions, and structural UI elements.
2. Developer Script Extension (API)
Utilizes the window.ChartingAPI registry to add custom drawings, interval choices, timezones, and technically complex indicator overlays.
Developer Script Files
The charting directory contains individual developer configuration scripts. Instead of writing monolithic configuration objects, you can inspect and modify:
- 📄 App.js - Handles core initialization.
- 📄 custom-buttons.js - Top toolbar buttons registration.
- 📄 custom-candle-type.js - Custom candlestick wicks and outline renderers.
- 📄 custom-console-log.js - Developer logging controller (toggle/intercept console output).
- 📄 custom-crosshair.js - Custom crosshair and tooltip drawing.
- 📄 custom-drawings.js - Custom drawing elements like buy/sell flags, zones, and shapes.
- 📄 custom-indicator.js - Custom technical indicators overlay.
- 📄 custom-interval.js - Adds custom charting resolutions.
- 📄 custom-load-drawings.js - Handles loading and restoring saved drawings.
- 📄 custom-pricescale.js - Custom price scale formatting.
- 📄 custom-primitives.js - Overlay watermarks and price level bands.
- 📄 custom-symbol-details.js - Custom symbol resolver config (sessions, decimals, etc.).
- 📄 custom-timescale.js - Custom time scale formatting.
- 📄 custom-timezone.js - Configures global zone conversions.
- 📄 custom-watermark-logo.js - Custom chart background logo watermark.
- 📄 custom-watermark.js - Chart background watermark text toggles.