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-drawings.js - Custom drawing elements like buy flags and zones.
- 📄 custom-interval.js - Adds custom charting resolutions.
- 📄 custom-primitives.js - Overlay watermarks and price level bands.
- 📄 custom-timezone.js - Configures global zone conversions.
- 📄 custom-watermark.js - Chart background watermark toggles.