Tutorials
This section contains tutorials on how to customize Backtestx Charts, integrate the engine with modern frontend frameworks, and build interactive trading dashboards.
Guides
Platform integrations
This section contains tutorials on how to integrate the Backtestx Charts engine into web and native mobile platforms.
Vanilla JS
Standard web integration using direct bundle script tags and initialization parameters.
iOS (Swift)
Integration guide for native Swift applications utilizing WKWebView and package resource bundles.
Android (Kotlin)
Integration guide for native Kotlin applications utilizing local compiled WebView assets.
How To
Custom Horizontal Scale
Override the time-based horizontal axis to display option strike pricing, yield curve maturities, or custom categories.
Inverted Price Scale
Invert the vertical axis scale to show short-selling charts, spread comparisons, or inverse exchange rates.
Legends
Build custom HTML overlays that retrieve OHLCV values dynamically to track active crosshair coordinates.
Panes
Partition the vertical charting area to split indicators (MACD, Stochastic) into independent sub-grids.
Price and Volume
Combine price candlestick series with vertical volume bars aligned on a secondary sub-pane.
Price Lines
Draw horizontal level overlays representing support/resistance levels with labels on the price scale.
Series Markers
Place signal shapes (buy arrows, sell flags) directly on candlestick wicks to highlight trades.
Set Crosshair Position
Programmatically position the cursor coordinates to synchronize crosshair movement across multiple charts.
Tooltips
Implement floating detail labels that follow the cursor to overlay precise pricing coordinates on hover.
Two Price Scales
Configure left and right vertical Y-axes to plot two separate series of varying magnitudes.
Watermark
Configure background watermark layers displaying active tickers, timeframes, and replay status indicators.
Examples / Demos
Real-time Updates (Live Ticker)
Simulate real-time streaming price feeds to update the last candle or append a new data point on tick arrival.
Simple Moving Average (SMA)
Display a customized Simple Moving Average line plot overlay tracking close values on the main price grid.
Exponential Moving Average (EMA)
Display an Exponential Moving Average line plot using weighted multiplier calculations.
Bollinger Bands (BB)
Plot standard deviation volatility boundaries with custom shaded overlay bands on price candles.
Relative Strength Index (RSI)
Display the momentum oscillator on a sub-pane grid with custom overbought/oversold boundaries.
MACD Indicator
Render MACD/Signal line plots alongside transparent positive/negative histogram bars on a sub-pane.
Stochastic Oscillator
Display %K and %D momentum lines on a sub-pane with levels shading.
Drawing Tools Integration
Allow users to draw custom trendlines, rays, circles, and rectangular support/resistance zones.
Saving Drawings
Serialize drawing coordinates directly to LocalStorage to preserve user markings on refresh.
Custom Candle Styles
Render alternative candlestick styles (Heikin Ashi, Hollow bodies, custom outlines) on the canvas.