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, interval, and data feed controller instance. Below is an example based on the core structure in App.js:

const datafeed = new window.Datafeed();

// Build features lists based on URL queries/toggles
const enabled_features = [
  "header_indicators",
  "header_chart_type",
  "header_resolutions",
  "header_widget",
  "left_toolbar"
];
const disabled_features = [
  "add_custom_interval"
];

// Initialize chart widget with options
const tvWidget = new window.widget({
  symbol: 'BTCUSD',
  interval: 1, // 1m
  datafeed: datafeed,
  container: 'chart-mount',
  timezone: 'Etc/UTC',
  library_path: '/src/charting_library/',
  locale: 'en',
  theme: 'Dark',
  autosize: true,
  supported_resolutions: ['1', '2', '3', '5', '10', '15', '30', '60', '120', '180', '240', '1D'],
  enabled_features: enabled_features,
  disabled_features: disabled_features
});

// Extract chart instance and expose globally
const chart = tvWidget.chartInstance;
window.chart = chart;

Global Exposure

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

// Expose globally
window.chart = chart;