Version: 1.0.0

First Steps

Getting started with customizing the Backtestx Chart requires setting up a mount point and passing configuration choices to the chart widget.

Mounting Element

The chart engine initializes inside a standard <div> element. Ensure this div is available in the DOM:

<div class="workspace">
  <div class="chart-container" id="chart-mount"></div>
</div>

Widget Options

Construct options containing the symbol name, resolution, and data feed controller instance. Below is an example based on the core structure in App.js:

const datafeed = new window.Datafeed();

const chartOptions = {
  symbol: 'BTCUSD',
  resolution: '30m',
  datafeed: datafeed,
  showTopToolbar: true,       // Toggle header bar
  showDrawingToolbar: true,    // Toggle left drawing sidebar
  showAddCustomInterval: true  // Add custom resolutions choice
};

// Mount the widget
const chart = new window.BacktestxChart('chart-mount', chartOptions);

Global Exposure

Exposing the instantiated chart on the global window scope makes it easily accessible to toolbar action handlers:

// Expose globally
window.chart = chart;