TradingView Charting Library

https://www.tradingview.com/charting-library-docs/v29/
Admin
TradingView Charting Library provides client-side solutions like Advanced Charts for displaying...
Tokens:198,576
Snippets:2,043
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies for Storage Example

Source: https://www.tradingview.com/charting-library-docs/v29/saving_loading/save-load-rest-api

Navigate to your chart storage folder and install the required Python dependencies using pip. This is a step in setting up the provided storage example.

```bash
cd your-repository  
pip install -r requirements.txt  
```

--------------------------------

### Clone Tutorial Repository

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement_datafeed_tutorial

Clone the tutorial repository to get started. For a real project, consider using this repository as a submodule.

```bash
git clone https://github.com/tradingview/charting-library-tutorial.git  
```

--------------------------------

### Initialize TradingView Widget with Broker Configuration

Source: https://www.tradingview.com/charting-library-docs/v29/customization/overrides/trading-overrides

Example setup for initializing the TradingView widget with a custom broker and datafeed configuration.

```javascript
function initOnReady() {
```

```javascript
  var datafeed = new Datafeeds.UDFCompatibleDatafeed(
```

```javascript
    "https://demo-feed-data.tradingview.com",
```

```javascript
    undefined,
```

```javascript
  {
```

```javascript
      maxResponseLength: 1000,
```

```javascript
      expectedOrder: "latestFirst",
```

```javascript
  }
```

```javascript
  );
```

```javascript
  class CustomBroker extends Brokers.BrokerDemo {}
```

```javascript
  var widget = (window.tvWidget = new TradingView.widget({
```

```javascript
    library_path:
```

```javascript
      "https://trading-terminal.tradingview-widget.com/charting_library/",
```

```javascript
    // debug: true, // uncomment this line to see Library errors and warnings in the console
```

```javascript
    fullscreen: true,
```

```javascript
    symbol: "AAPL",
```

```javascript
    interval: "1D",
```

```javascript
    container: "tv_chart_container",
```

```javascript
    datafeed: datafeed,
```

```javascript
    locale: "en",
```

```javascript
    disabled_features: ["show_right_widgets_panel_by_default", "open_account_manager"],
```

```javascript
    broker_config: {
```

```javascript
      configFlags: {
```

--------------------------------

### Install and Run http-server with Node.js

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/First-Run-Tutorial

Install the `http-server` package globally using npm, then run it from your project directory to serve files on port 9090.

```bash
npm install http-server -g
http-server -p 9090

```

--------------------------------

### Start the Snapshot Server (Node.js)

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-snapshots-server

Starts the Express server, listening for incoming requests on the configured port (3001). Logs a confirmation message to the console.

```javascript
app.listen(port, () => {  
    console.log(`Listening at http://localhost:${port}`);  
});  

```

--------------------------------

### Install Dependencies for Snapshot Server

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-snapshots-server

Installs necessary Node.js packages: express for the web server, multer for file uploads, and cors for cross-origin requests.

```bash
npm init -y  
npm install express multer cors  

```

--------------------------------

### Start Django Test Server

Source: https://www.tradingview.com/charting-library-docs/v29/saving_loading/save-load-rest-api

Start a test instance of your database using the Django development server. For production, use a WSGI server like Gunicorn instead of `runserver`.

```bash
python manage.py runserver  
```

--------------------------------

### Custom Datafeed and Broker Implementation

Source: https://www.tradingview.com/charting-library-docs/v29/customization/styles/custom-themes

Example of a custom datafeed extending UDFCompatibleDatafeed and a custom broker extending BrokerDemo. This setup is necessary for enabling features like Buy/Sell buttons and order placement, using fake data for quotes.

```javascript
function initOnReady() {
  class CustomDatafeed extends Datafeeds.UDFCompatibleDatafeed {
    // getQuotes implementation is required to enable the Buy/Sell buttons and placing orders. For this purpose, fake data is used
    getQuotes(symbols, onDataCallback, _onErrorCallback) {
      console.log("getQuotes invoked: ", symbols);
      
      const data = [];
      symbols.forEach((symbol) => {
        data.push({
          n: symbol,
          s: "ok",
          v: {
            ch: 1234,
            chp: 1.23,
            lp: 4321,
            open_price: Math.random() * (5 - 1) + 1,
            high_price: Math.random() * (5 - 1) + 1,
            low_price: Math.random() * (5 - 1) + 1,
            prev_close_price: Math.random() * (5 - 1) + 1,
            original_name: symbol,
            short_name: symbol
          },
        });
      });
      setTimeout(() => onDataCallback(data), 10);
    }
    
    unsubscribeQuotes() {
      // ...
    }
    
    // Required to update the quotes and reflect those changes across various parts of the UI such as the Legend, Order Ticket and Account Manager
    subscribeQuotes(symbols, fastSymbols, onRealtimeCallback, listenerGUID) {
      console.log("subscribeQuotes invoked: ", symbols, fastSymbols);
      
      const names = symbols.concat(fastSymbols);
      names.forEach((name) => {
        setInterval(() => {
          onRealtimeCallback([
            {
              s: "ok",
              n: name,
              v: {
                ch: Math.random() * (5 - 1) + 1,
                chp: Math.random() * (5 - 1) + 1,
                lp: Math.random() * (10 - 1) + 1,
                ask: Math.random() * (10 - 1) + 1,
                bid: Math.random() * (10 - 1) + 1,
                spread: 0.2,
                open_price: Math.random() * (5 - 1) + 1,
                high_price: Math.random() * (5 - 1) + 1,
                low_price: Math.random() * (5 - 1) + 1,
                prev_close_price: Math.random() * (5 - 1) + 1,
                original_name: name,
                volume: Math.random() * (5 - 1) + 1,
                short_name: symbol
              },
            },
          ]);
        }, 5000); // In this demo, the quotes are only refreshed every 5s
      });
    }
  }

  const datafeed = new CustomDatafeed(
    "https://demo-feed-data.tradingview.com",
    undefined,
    {
      maxResponseLength: 1000,
      expectedOrder: "latestFirst",
    }
  );

  class MyCustomBroker extends Brokers.BrokerDemo {}

  var widget = (window.tvWidget = new TradingView.widget({
    library_path:
      "https://trading-terminal.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this line to see Library errors and warnings in the console
    fullscreen: true,
    symbol: "AAPL",
    interval: "1D",
    container: "tv_chart_container",
    datafeed: datafeed,
    locale: "en",
    // Disable local storage to avoid overriding of custom themes
    disabled_features: ["use_localstorage_for_settings", "create_volume_indicator_by_default", "open_account_manager"],
    enabled_features: [],
    widgetbar: {
      details: true,
      watchlist: true,
      datawindow: true,
      watchlist_settings: {
        default_symbols: ["MSFT", "IBM", "AAPL"],
      },
    },
    broker_factory: function (host) {

```

--------------------------------

### getQuotes Implementation Example

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/datafeed-api/trading-platform-methods

This example demonstrates how to implement the `getQuotes` method. It generates random quote data for a list of symbols and returns it via a callback. This is useful for displaying values in the Legend on mobile and for ask/bid buttons.

```javascript
// In this example we are returning random values (which probably don't make any sense from a trading purpose) 
// but it is just to illustrate how to structure the function and returned object. 
getQuotes(symbols, onDataCallback, onErrorCallback) {
    const data = [];
  
    symbols.forEach((symbol)=>{
        data.push({
            n: symbol,
            s: 'ok',
            v: {
                ch: Math.random() * (5 - 1) + 1,
                chp: Math.random() * (5 - 1) + 1,
                lp: Math.random() * (10 - 1) + 1,
                ask: Math.random() * (10 - 1) + 1,
                bid: Math.random() * (10 - 1) + 1,
                spread: 0.20,
                open_price: Math.random() * (5 - 1) + 1,
                high_price: Math.random() * (5 - 1) + 1,
                low_price: Math.random() * (5 - 1) + 1,
                prev_close_price: Math.random() * (5 - 1) + 1,
                original_name: symbol,
                volume: Math.random() * (5 - 1) + 1,
            },
        });
    });
  
    // To ensure the callback is only evoked when the library is ready - see Asynchronous callbacks 
    setTimeout(() => onDataCallback(data), 0);
}
```

--------------------------------

### Example Trading Debug Logs

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/enable-debug-mode

These are example console logs for trading debug mode, illustrating Broker API method calls and their returned values.

```log
2024-08-22T09:18:12.344Z Broker API   | id: 1 | method: placeOrder | CALLED with arguments: [{"symbol":"AAPL","type":2,"qty":100,"side":1,"seenPrice":173.68,"currentQuotes":{"ask":173.68,"bid":173.68},"stopType":0,"customFields":{}},null]  
2024-08-22T09:18:12.344Z Broker API   | id: 1 | method: placeOrder |  RETURNED (async): {}  
```

--------------------------------

### Provide User Account Metadata

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-broker-api/enable-ui

Implement `accountsMetainfo` to return an array of account objects. You can start with a single hardcoded test account. For multiple accounts, refer to the Multiple Accounts guide.

```typescript
async accountsMetainfo(): Promise<AccountMetainfo[]> {
    return [
        {
            id: '1' as AccountId,
            name: 'Test account',
        },
    ];
}
```

--------------------------------

### Bars Request Example (Basic)

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/UDF

This is a basic example of a request for historical bar data. The `countback` parameter has higher priority than `from`.

```http
GET /history?symbol=BEAM~0&resolution=D&from=1386493512&to=1395133512&countback=500
```

--------------------------------

### Example UDF Symbol List Response

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/UDF

This pseudo-format example illustrates how a symbol list response from an exchange might be structured using the response-as-a-table concept.

```json
{
   symbols: ["MSFT", "AAPL", "FB", "GOOG"],
   min_price_move: 0.1,
   description: ["Microsoft corp.", "Apple Inc", "Facebook", "Google"]
}
```

--------------------------------

### Run the Snapshot Server

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-snapshots-server

Command to start the Node.js server script. This will make the server available to receive snapshot uploads.

```bash
node snapshotserver.js  

```

--------------------------------

### Marks Response Example

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/UDF

An example of the expected response structure for marks data, including arrays for IDs, times, colors, text, labels, and sizes.

```json
{
    id: [array of ids],
    time: [array of times],
    color: [array of colors],
    text: [array of texts],
    label: [array of labels],
    labelFontColor: [array of label font colors],
    minSize: [array of minSizes]
}
```

--------------------------------

### Widget Constructor Configuration

Source: https://www.tradingview.com/charting-library-docs/v29/saving_loading/save-load-rest-api

Example of how to configure the `charts_storage_url` in the Widget Constructor to use the demo storage or a custom storage solution.

```APIDOC
## Widget Constructor Configuration

### Description
Configure the `charts_storage_url` in the Widget Constructor to enable saving and loading of chart layouts and indicator templates. You can use the provided demo storage URL for testing or point to your own implementation.

### Parameters
#### Widget Constructor Parameters
- **`charts_storage_url`** (string) - Required - The URL endpoint for your chart storage.
- **`client_id`** (string) - Required - A client ID that represents a user group.
- **`user_id`** (string) - Required - A user ID that uniquely identifies each user within a `client_id` group.

### Example
```javascript
const datafeed = new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com");
new TradingView.widget({
    container: "chartContainer",
    locale: "en",
    library_path: "charting_library/",
    datafeed: datafeed,
    symbol: "AAPL",
    interval: "1D",
    charts_storage_url: "https://example.com", // Or "https://saveload.tradingview.com" for demo storage
    client_id: "tradingview.com",
    user_id: "public_user_id",
})
```
```

--------------------------------

### Initialize Broker API Datafeed and Positions

Source: https://www.tradingview.com/charting-library-docs/v29/customization/overrides/trading-overrides

Example implementation of a custom broker class extending Brokers.BrokerDemo to provide position data to the chart.

```javascript
function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

function initOnReady() {
  class CustomDatafeed extends Datafeeds.UDFCompatibleDatafeed {}

  var datafeed = new CustomDatafeed(
    "https://demo-feed-data.tradingview.com",
    undefined,
   {
      maxResponseLength: 1000,
      expectedOrder: "latestFirst"
  }
  );

   class CustomBroker extends Brokers.BrokerDemo {
   positions() {
            return new Promise(resolve => {
              setTimeout(async () => {
                        // await delay(1000);
                resolve([
                  {
                    id: 'NasdaqNM:AAPL',
                    profit: 0,
                    qty: 12,
                    side: 1,
                    symbol: 'AAPL',
```

--------------------------------

### Bars Response Example (OK)

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/UDF

A successful response for historical bar data, containing status, timestamps, and closing prices.

```json
{
   s: "ok",
   t: [1386493512, 1386493572, 1386493632, 1386493692],
   c: [42.1, 43.4, 44.3, 42.8]
}
```

--------------------------------

### Example UDF Symbol Group Response

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/UDF

This example shows the expected response structure for a symbol group request (e.g., GET /symbol_info?group=NYSE). It includes various properties for each symbol, treated as table columns.

```json
{
   symbol: ["AAPL", "MSFT", "SPX"],
   description: ["Apple Inc", "Microsoft corp", "S&P 50 index"],
   "exchange-listed": "NYSE",
   "exchange-traded": "NYSE",
   minmovement: 1,
   minmovement2: 0,
   pricescale: [1, 1, 100],
   "has-dwm": true,
   "has-intraday": true,
   type: ["stock", "stock", "index"],
   ticker: ["AAPL~0", "MSFT~0", "$SPX500"],
   timezone: “America/New_York”,
   "session-regular": “0900-1600”,
}
```

--------------------------------

### Serve Static Files

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement_datafeed_tutorial

Run this command to serve static files from the tutorial directory, allowing you to view the results in your browser.

```bash
npx serve  
```

--------------------------------

### Manage Watchlist Items

Source: https://www.tradingview.com/charting-library-docs/v29/core_concepts/widget-methods

Get the `IWatchListApi` using `watchList`. This example retrieves the active list ID, its items, and then updates the list by adding a new section and symbol.

```javascript
const watchlistApi = await widget.watchList();
const activeListId = watchlistApi.getActiveListId();
const currentListItems = watchlistApi.getList(activeListId);
// Adds a new section and item to the current Watchlist
watchlistApi.updateList(activeListId, [...currentListItems, '###NEW SECTION', 'AMZN']);
```

--------------------------------

### Configure NGINX Server

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/First-Run-Tutorial

Configure NGINX to serve the tutorial folder on port 9090. Replace `ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER` with the actual path to your project's `example` directory.

```nginx
server {
    listen       9090;
    server_name  localhost;

    location / {
        root ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER;
    }
}

```

--------------------------------

### Interact with the active chart

Source: https://www.tradingview.com/charting-library-docs/v29/core_concepts/widget-methods

Use `activeChart` to get an `IChartWidgetApi` for the currently selected chart. This example draws a vertical line. Remember to manage event subscriptions manually in multi-chart layouts.

```javascript
widget.activeChart().createMultipointShape(
  [{ price: 168, time: Date.UTC(2017, 10, 13) / 1000 }],
  { shape: 'vertical_line'}
);
```

--------------------------------

### Create Project Directory

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement_datafeed_tutorial/Widget-Setup

Use these commands to create a new directory for your project and navigate into it.

```bash
mkdir chart-project
cd chart-project
```

--------------------------------

### Configure package.json with Post-Install Script

Source: https://www.tradingview.com/charting-library-docs/v29/getting_started/NPM

Add a post-install script to copy charting library files to the public directory after installation. This ensures static assets are available.

```json
{
  "scripts": {
    "postinstall": "npm run copy-files",
    "copy-files": "cp -R node_modules/charting_library/ public"
  },
  "dependencies": {
    "charting_library": "git@github.com:tradingview/charting_library.git#semver:28.0.0"
  }
}
```

--------------------------------

### Initialize WebSocket Connection

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement_datafeed_tutorial/Streaming-Implementation

Set up a WebSocket connection to the streaming service and define event listeners for open, close, and error events. This is the initial setup for real-time data.

```javascript
const socket = new WebSocket(  
    'wss://streamer.cryptocompare.com/v2?api_key=' + apiKey  
);

const channelToSubscription = new Map();

socket.addEventListener('open', () => {
    console.log('[socket] Connected');
});

socket.addEventListener('close', (reason) => {
    console.log('[socket] Disconnected:', reason);
});

socket.addEventListener('error', (error) => {
    console.log('[socket] Error:', error);
});

export function subscribeOnStream() {
    // To Do
}

export function unsubscribeFromStream() {
    // To Do
}
```

--------------------------------

### Configuring Initial Watermark via Settings Adapter

Source: https://www.tradingview.com/charting-library-docs/v29/ui_elements/watermarks

Illustrates how to set the initial visibility and color of the default watermark using the `settings_adapter` in the widget constructor.

```APIDOC
## Configuring Initial Watermark via Settings Adapter

If you only need to control the initial visibility and color of the default watermark, you can use the settings adapter in your Widget Constructor. This method doesn't support custom text. It only applies to the default built-in watermark.

To make the watermark visible, set the `symbolWatermark` property within the `initialSettings` of your `settings_adapter`. Note that defining `setValue` and `removeValue` functions is required.

### Method
```javascript
new TradingView.widget({
    /* Other Widget Constructor properties */

    settings_adapter: {
        initialSettings: {
            "symbolWatermark": '{ "visibility": "true", "color": "rgba(244, 67, 54, 0.25)" }',
        },
        setValue: function (key, value) {
            console.log(`set value: ${key} ${value}`);
        },
        removeValue: function (key) {
            console.log(`remove value: ${key}`);
        },
    }
})
```
```

--------------------------------

### Initialize Charting Library and Add Execution Shapes

Source: https://www.tradingview.com/charting-library-docs/v29/ui_elements/drawings/drawings-api

This snippet demonstrates initializing the TradingView Charting Library and then using `createExecutionShape` to add buy/sell arrows representing trading history. It also shows how to emulate similar arrows using `createShape`.

```javascript
function initOnReady() {
  var widget = (window.tvWidget = new TradingView.widget({
    library_path:
      "https://trading-terminal.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this line to see Library errors and warnings in the console
    fullscreen: true,
    symbol: "AAPL",
    interval: "1D",
    container: "tv_chart_container",
    datafeed: new Datafeeds.UDFCompatibleDatafeed(
      "https://demo-feed-data.tradingview.com"
    ),
    locale: "en",
    disabled_features: ["open_account_manager"],
    enabled_features: ["hide_right_toolbar"],
  }));
  widget.onChartReady(async () => {
    /* Going to hide the marks from the test datafeed */
    setTimeout(() => {
      widget.activeChart().clearMarks();
    }, 1000);

    const shape = await widget.activeChart().createExecutionShape();
    shape
      .setText("@1,320.75 Limit Buy 1")
      .setTooltip("@1,320.75 Limit Buy 1")
      .setTextColor("rgba(0,0,179)")
      .setArrowColor("#0000b3")
      .setDirection("buy")
      .setTime(1520035200)
      .setArrowHeight(32)
      .setArrowSpacing(10)
      .setPrice(160);

    widget
      .activeChart()
      .createShape(
        { time: 1521763200, channel: "low" },
        { shape: "arrow_up", text: "Buy" }
      );
    widget
      .activeChart()
      .createShape(
        { time: 1520899200, price: 184 },
        { shape: "arrow_down", text: "Sell" }
      );
  });
}

window.addEventListener("DOMContentLoaded", initOnReady, false);
```

--------------------------------

### Example Datafeed Debug Logs

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/enable-debug-mode

These are example console logs generated when datafeed debug mode is enabled, showing symbol resolution, data processing, and bar requests.

```log
2024-08-20T13:36:56.244Z Symbol resolve requested: `AAPL`  
2024-08-20T13:36:56.504Z FEED [AAPL|1D]: Processing pending subscribers, count=2  
2024-08-20T13:36:56.504Z FEED [AAPL|1D]: Leftmost subscriber requires 329 bars prior 2024-08-20T00:00:00.000Z  
2024-08-20T13:36:56.505Z FEED [AAPL|1D]: Requesting data: [2023-05-18T00:00:00.000Z ... 2024-08-21T00:00:00.000Z, 330 bars]  
2024-08-20T13:36:56.735Z FEED [AAPL|1D]: Receiving bars: total 330 bars in  [2016-11-30T00:00:00.000Z ... 2018-03-27T00:00:00.000Z], requested range: [2023-05-18T00:00:00.000Z ... 2024-08-21T00:00:00.000Z, 330 bars]  
```

--------------------------------

### Run Django Migrations

Source: https://www.tradingview.com/charting-library-docs/v29/saving_loading/save-load-rest-api

Apply database migrations to create the necessary schema for the storage example. This command sets up the database structure without populating it with data.

```bash
python manage.py migrate  
```

--------------------------------

### Serve Library Locally with Python

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/First-Run-Tutorial

Use Python's built-in HTTP server module to serve the project files locally. Python 2.x uses `SimpleHTTPServer`, while Python 3.x uses `http.server`. Both are run on port 9090.

```bash
# Python 2.x
python -m SimpleHTTPServer 9090

# Python 3.x
python -m http.server 9090

```

--------------------------------

### Chart Customization Precedence Example

Source: https://www.tradingview.com/charting-library-docs/v29/customization/customization-precedence

This example demonstrates how different customization methods override each other. Modify the flags at the beginning of the script to observe changes in candle body colors.

```javascript
const applyOverrides = true;
const load = true;
const saved_data = true;
const settings_overrides = true;
const settings_adapter = true;
const localStorage = true;
const overrides = true;

const colors = {
    applyOverrides: "orange",
    load: "blue",
    saved_data: "red",
    settings_overrides: "purple",
    settings_adapter: "green",
    localStorage: "black",
    overrides: "yellow"
};

const chartOptions = {
    width: "100%",
    height: "100%",
    // ... other chart options
};

const widget = new TradingView.widget(chartOptions);

widget.on('ready', function() {
    // Apply overrides based on flags
    if (applyOverrides) {
        widget.applyOverrides(colors);
    }

    if (load) {
        // Example of loading data, actual data structure would be more complex
        widget.load({
            // ... chart state data
        });
    }

    if (saved_data) {
        // Example of setting saved data, actual data structure would be more complex
        widget.set_saved_data({
            // ... saved chart content
        });
    }

    if (settings_overrides) {
        // Example of settings overrides
        widget.options.set("symbol", "AAPL");
    }

    if (settings_adapter) {
        // Example of using a settings adapter (implementation not shown)
    }

    if (localStorage) {
        // Example of using localStorage (implementation not shown)
    }

    if (overrides) {
        // Example of using general overrides
        widget.chart().applyOverrides({
            "mainSeriesProperties.candleStyle": "line"
        });
    }

    // The actual color of candle bodies will depend on the highest precedence flag set to true.
    // For example, if only 'applyOverrides' is true, the bodies will be orange.
    // If 'applyOverrides' and 'load' are true, 'applyOverrides' (orange) will take precedence.
});

```

--------------------------------

### Data Object Example

Source: https://www.tradingview.com/charting-library-docs/v29/trading_terminal/account-manager/value-formatters

An example of a data object containing balance and currency information. This structure is used to demonstrate how formatters like `fixedInCurrency` utilize multiple data fields.

```javascript
{
  // <...other object fields...>
  balance: 1000.00,
  currency: "EUR",
}
```

--------------------------------

### Implement getBars for Different Resolutions

Source: https://www.tradingview.com/charting-library-docs/v29/core_concepts/Resolution

Implement the `getBars` method to fetch data for each supported resolution. This example shows handling for 1-minute and 2-minute resolutions, with placeholders for custom logic.

```javascript
getBars(symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) {
    if (resolution === '1') {
        const bars = getBarsFor1MinuteResolution(periodParams);
        onHistoryCallback(bars);
        
        return;
    }
    
    if (resolution === '2') {
        const bars = getBarsFor2MinuteResolution(periodParams);
        onHistoryCallback(bars);
        
        return;
    }
  
    //...  
}

function getBarsFor1MinuteResolution(periodParams) {
    // Your custom logic
}

function getBarsFor2MinuteResolution(periodParams) {
    // Your custom logic
}
```

--------------------------------

### Initialize Toolbar Customization

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/add-custom-button-to-top-toolbar

Ensures the toolbar is fully loaded before adding custom elements by waiting for the headerReady promise.

```javascript
widget.headerReady().then(function () {});
```

--------------------------------

### Full Example of Custom OHLC Study

Source: https://www.tradingview.com/charting-library-docs/v29/custom_studies/Custom-Studies-OHLC-Plots

A complete example demonstrating the definition of OHLC plots, default styles, simple plot declarations, and data generation within the study's constructor.

```javascript
{
    name: 'OHLC_sample',
    metainfo: {
        _metainfoVersion: 51,
        id: 'OHLC_sample@tv-basicstudies-1',
        scriptIdPart: '',
        description: 'OHLC_sample',
        shortDescription: 'OHLC_sample',
        is_hidden_study: false,
        is_price_study: false,
        isCustomIndicator: true,
        plots: [
            {
                id: 'plot_0',
                type: 'ohlc_open',
                target: 'plotcandle_0',
            },
            {
                id: 'plot_1',
                type: 'ohlc_high',
                target: 'plotcandle_0',
            },
            {
                id: 'plot_2',
                type: 'ohlc_low',
                target: 'plotcandle_0',
            },
            {
                id: 'plot_3',
                type: 'ohlc_close',
                target: 'plotcandle_0',
            },
        ],

        ohlcPlots: {
            plotcandle_0: {
                title: 'Plot candle title',
            },
        },

        defaults: {
            ohlcPlots: {
                plotcandle_0: {
                borderColor: '#000000',
                    color: '#2196F3',
                    drawBorder: true,
                    drawWick: true,
                    plottype: 'ohlc_candles', // might be 'ohlc_bars' for bars
                    visible: true,
                    wickColor: '#737375',
                },
            },
            precision: 4,
            inputs: {},
        },
        styles: {},
        inputs: [],
    },
    constructor: function() {
        this.main = function(context, inputCallback) {
            this._context = context;
            this._input = inputCallback;

            var direction = Math.sign(Math.random() - 0.5);
            var value = Math.random() * 200;

            var open  = value + 8 * direction;
            var high = value + 15;
            var low = value - 15;
            var close = value - 8 * direction;

            return [open, high, low, close];
        }
    }
}
```

--------------------------------

### Initialize TradingView Charting Library with Custom Datafeed and Broker

Source: https://www.tradingview.com/charting-library-docs/v29/customization/overrides/trading-overrides

This setup demonstrates initializing the widget with a custom UDF datafeed and a broker implementation that overrides default position and order handling.

```javascript
function delay(ms) {
 return new Promise((resolve) => {
 setTimeout(resolve, ms);
 });
}

function initOnReady() {
 class CustomDatafeed extends Datafeeds.UDFCompatibleDatafeed {}

 var datafeed = new CustomDatafeed(
 "https://demo-feed-data.tradingview.com",
 undefined,
 {
 maxResponseLength: 1000,
 expectedOrder: "latestFirst"
 }
 );

 class CustomBroker extends Brokers.BrokerDemo {
 positions() {
						return new Promise(resolve => {
							setTimeout(async () => {
 // await delay(1000);
								resolve([
									{
										id: 'NasdaqNM:AAPL',
										profit: 0,
										qty: 12,
										side: 1,
										symbol: 'AAPL',
										type: 2,
										last: 173.68,
										price: 173.68,
										avgPrice: 173.68,
									},
								]);
							}, 0);
						});
					}
					orders() {
						return new Promise(resolve => {
							setTimeout(async () => {
 // await delay(1000);
								resolve([
									{
										id: '1',
										profit: 0,
										qty: 12,
										side: 1,
										status: 2,
										symbol: 'AAPL',
										execution: '',
										type: 2,
										last: 173.68,
										price: 173.68,
										avgPrice: 173.68,
									},
									{
										id: '3',
										parentId: 'NasdaqNM:AAPL',
										qty: 12,
										side: -1,
										status: 6,
										symbol: 'AAPL',
										type: 1,
										execution: '',
										parentType: 2,
										limitPrice: 180,
									},
									{
										id: '4',
										parentId: 'NasdaqNM:AAPL',
										qty: 12,
										side: -1,
										status: 6,
										symbol: 'AAPL',
										execution: '',
										parentType: 2,
										type: 3,
										stopPrice: 165,
									},
								]);
							}, 0);
						});
					}
				}

 var widget = (window.tvWidget = new TradingView.widget({
 library_path:
 "https://trading-terminal.tradingview-widget.com/charting_library/",
 // debug: true, // uncomment this line to see Library errors and warnings in the console
 fullscreen: true,
 symbol: "AAPL",
 interval: "1D",
 container: "tv_chart_container",
 datafeed: datafeed,
 locale: "en",
 disabled_features: ["show_right_widgets_panel_by_default"],

 broker_factory: function (host) {
 window.tradingHost = host;
 return new CustomBroker(host, datafeed);
 },
 broker_config: {
 configFlags: {
 supportClosePosition: true,
 supportPLUpdate:
```

--------------------------------

### QuoteData Example

Source: https://www.tradingview.com/charting-library-docs/v29/connecting_data/datafeed-api/trading-platform-methods

This is an example of the QuoteData object structure. It includes various market data points like change, percentage change, last price, ask, bid, open, high, low, previous close, and volume.

```json
{
    "s": "ok",
    "n": "NasdaqNM:AAPL",
    "v": {
        "ch": 0,
        "chp": 0,
        "short_name": "AAPL",
        "exchange": "",
        "original_name": "NasdaqNM:AAPL",
        "description": "NasdaqNM:AAPL",
        "lp": 173.68,
        "ask": 173.68,
        "bid": 173.68,
        "open_price": 173.68,
        "high_price": 173.68,
        "low_price": 173.68,
        "prev_close_price": 172.77,
        "volume": 173.68
    }
}
```

--------------------------------

### Initialize Chart and Add Toolbar Elements

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/add-custom-button-to-top-toolbar

Uses the headerReady promise to ensure the toolbar is available before creating custom buttons and dropdowns.

```javascript
function initOnReady() {
 var datafeed = new Datafeeds.UDFCompatibleDatafeed(
 "https://demo-feed-data.tradingview.com",
 undefined,
 {
 maxResponseLength: 1000,
 expectedOrder: "latestFirst"
 }
 );

 var widget = (window.tvWidget = new TradingView.widget({
 library_path:
 "https://trading-terminal.tradingview-widget.com/charting_library/",
 // debug: true, // uncomment this line to see Library errors and warnings in the console
 fullscreen: true,
 symbol: "AAPL",
 interval: "1D",
 container: "tv_chart_container",
 datafeed: datafeed,
 locale: "en",
 disabled_features: ["open_account_manager", "buy_sell_buttons", "trading_account_manager"],
 enabled_features: ["hide_right_toolbar"],
 }));

 widget.headerReady().then(function () {
 var dropdown = widget.createDropdown({
 title: "Select symbol",
 tooltip: "Select one of the symbols to load the chart with",
 items: [
 {
 title: "MSFT (1M)",
 onSelect: () => {
 widget.setSymbol("MSFT", "1M");
 }
 },
 {
 title: "IBM (1D)",
 onSelect: () => {
 widget.setSymbol("IBM", "1D");
 }
 }
 ]
 });

 var button = widget.createButton();
 button.textContent = "Show dialog";
 button.addEventListener("click", function () {
 widget.showConfirmDialog({
 title: "Accept Terms and Conditions",
 body:
 "By selecting Yes, you agree to the terms of use. Otherwise, select No to cancel.",
 callback(result) {
 result
 ? console.log("The terms are accepted.")
 : console.log("The terms are not accepted.");
 }
 });
 });
 });
}

window.addEventListener("DOMContentLoaded", initOnReady, false);
```

--------------------------------

### Example Study Styles Metadata

Source: https://www.tradingview.com/charting-library-docs/v29/customization/overrides/indicator-overrides

This is an example of the metadata returned by `getStudyStyles`. It shows internal plot IDs like `plot_0` and their associated properties, as well as UI-facing titles. Use the UI plot name (e.g., 'Plot') for override paths, not the internal ID.

```json
{
    "defaults": {
        "styles": {
            // Plot properties
            "plot_0": {
                "display": 15,
                "linestyle": 0,
                "linewidth": 1,
                "plottype": 0,
                "trackPrice": false,
                "transparency": 0,
                "color": "#2196F3"
            },
            "smoothedMA": {
                "display": 0,
                "linestyle": 0,
                "linewidth": 1,
                "plottype": 0,
                "trackPrice": false,
                "transparency": 0
            }
        },

    // ...

    "styles": {
        "plot_0": {
            "title": "Plot",  // Plot name in the UI
            "histogramBase": 0,
            "joinPoints": false
        },
        "smoothedMA": {
            "title": "Smoothed MA",
            "histogramBase": 0,
            "joinPoints": false
        }
    }
}
```

--------------------------------

### Get Resolution

Source: https://www.tradingview.com/charting-library-docs/v29/ui_elements/Chart

Retrieves the current resolution (time interval) of the chart.

```APIDOC
## resolution

### Description
Gets the current resolution of the chart.

### Method
```javascript
widget.activeChart().resolution()
```

### Response
#### Success Response (string)
- **resolution** (string) - The current chart resolution (e.g., 'D', '60', '15').

### Request Example
```javascript
console.log(widget.activeChart().resolution());
```
```

--------------------------------

### period(context)

Source: https://www.tradingview.com/charting-library-docs/v29/custom_studies/PineJS-Utility-Functions

Gets the current chart's resolution string.

```APIDOC
## period(context)

### Description
Resolution string, e.g. `60` - 60 minutes, `D` - daily, `W` - weekly, `M` - monthly, `5D` - 5 days, `12M` - one year, `3M` - one quarter.

### Arguments
* **`context`** (PineJS execution context) - The execution context.
```

--------------------------------

### Serve Local Folder with npx

Source: https://www.tradingview.com/charting-library-docs/v29/releases/Update-Library

Use this command in your terminal to serve a local folder containing the library. Replace `<PATH_TO_YOUR_FOLDER>` with the actual path to your library files.

```bash
npx serve <PATH_TO_YOUR_FOLDER>
```

--------------------------------

### Retrieve Active Watchlist ID

Source: https://www.tradingview.com/charting-library-docs/v29/trading_terminal/Watch-List

Get the ID of the currently active watchlist.

```APIDOC
## Retrieve Active Watchlist ID

### Description
You can also call the `getActiveListId` method to get an ID of the active watchlist.

### Method
```javascript
watchlistApi.getActiveListId();
```

### Parameters
None
```

--------------------------------

### Enable DOM Widget and Subscribe to Depth Data

Source: https://www.tradingview.com/charting-library-docs/v29/trading_terminal/depth-of-market

This example demonstrates enabling the DOM widget and implementing subscribeDepth and unsubscribeDepth to populate it with fake data. Ensure the 'dom_widget' featureset is added to enabled_features and supportLevel2Data is set to true. The cancelOrders method must also be implemented in your Broker API.

```javascript
const widget = new TradingView.widget({
  // ... other options
  enabled_features: [
    'dom_widget'
  ],
  // ...
  // For Level 2 data
  supportLevel2Data: true,
  // ...
});

// Broker API implementation
class BrokerAPISample {
  // ...
  cancelOrders() {
    // Required for DOM widget
    return Promise.resolve();
  }
  // ...
  subscribeDepth(symbol, callback) {
    // Fake data for demonstration
    const interval = setInterval(() => {
      callback({
        symbol: symbol,
        timestamp: Date.now(),
        asks: [
          [100.1, 10], [100.2, 5], [100.3, 15]
        ],
        bids: [
          [100.0, 12], [99.9, 8], [99.8, 20]
        ]
      });
    }, 1000);
    return interval;
  }

  unsubscribeDepth(subscriptionId) {
    clearInterval(subscriptionId);
  }
  // ...
}
```

--------------------------------

### Get Watchlist API Instance

Source: https://www.tradingview.com/charting-library-docs/v29/trading_terminal/Watch-List

Retrieve the IWatchListApi object to interact with watchlists.

```APIDOC
## Get Watchlist API Instance

### Description
Use the `watchList` method to retrieve the `IWatchListApi` object for interacting with the watchlist.

### Method
```javascript
const watchlistApi = await widget.watchList();
```

### Parameters
None
```

--------------------------------

### Broker API Full Implementation Example (TypeScript)

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-broker-api/manage-orders

This snippet shows a complete implementation of the Broker API, including abstract classes and concrete implementations for managing orders, positions, and other trading-related operations. It requires importing various types from the charting library.

```typescript
import {
    AccountId,
    AccountManagerInfo,
    AccountMetainfo,
    ActionMetaInfo,
    ConnectionStatus,
    DefaultContextMenuActionsParams,
    Execution,
    IBrokerConnectionAdapterHost,
    IBrokerTerminal,
    InstrumentInfo,
    IsTradableResult,
    Order,
    OrderStatus,
    OrderType,
    PlacedOrder,
    PlaceOrderResult,
    Position,
    PreOrder,
    Side,
    StandardFormatterName,
    TradeContext,
} from '../node_modules/trading_platform/charting_library/charting_library';;

interface SimpleMap<TValue> {
    [key: string]: TValue;
}

import { IDatafeedQuotesApi } from 'trading_platform';

export const enum CommonAccountManagerColumnId {
    /** You should use this column ID if you want to fix the column in the positions and orders tables. */
    Symbol = 'symbol',
}

export abstract class AbstractBrokerMinimal implements IBrokerTerminal {
    protected readonly _host: IBrokerConnectionAdapterHost;
    protected readonly _quotesProvider: IDatafeedQuotesApi;

    constructor(host: IBrokerConnectionAdapterHost, quotesProvider: IDatafeedQuotesApi) {
        this._host = host;
        this._quotesProvider = quotesProvider;
    }

    abstract orders(): Promise<Order[]>;

    abstract positions(): Promise<Position[]>;

    abstract modifyOrder(order: Order, confirmId?: string): Promise<void>;

    abstract cancelOrder(orderId: string): Promise<void>;

    abstract chartContextMenuActions(
        context: TradeContext,
        options?: DefaultContextMenuActionsParams
    ): Promise<ActionMetaInfo[]>;

    abstract isTradable(symbol: string): Promise<boolean | IsTradableResult>;

    abstract connectionStatus(): ConnectionStatus;

    abstract executions(symbol: string): Promise<Execution[]>;

    abstract symbolInfo(symbol: string): Promise<InstrumentInfo>;

    abstract accountManagerInfo(): AccountManagerInfo;

    abstract accountsMetainfo(): Promise<AccountMetainfo[]>;

    abstract currentAccount(): AccountId;

    abstract placeOrder(order: PreOrder): Promise<PlaceOrderResult>;
}

export class BrokerMinimal extends AbstractBrokerMinimal {

    /** Initializes an empty map to store orders indexed by their IDs */
    private readonly _orderById: SimpleMap<Order> = {};

    /** A counter to generate unique IDs for new orders */
    private _orderIdCounter: number = 1;

    /** Retrieves all orders stored in the `_orderById` map and returns an array containing all orders */
    private _orders(): Order[] {
        return Object.values(this._orderById);
    }

    orders(): Promise<Order[]> {
        return Promise.resolve(this._orders());
    }

    positions(): Promise<Position[]> {
        return Promise.resolve([]);
    }

    async modifyOrder(order: Order, confirmId?: string | undefined): Promise<void> {
        // Look up the original order using its ID
        const originalOrder = this._orderById[order.id];

        // If no such order exists, do nothing
        if (originalOrder === undefined) {
            return;
        }

        const handler = () => {
            // Apply the modification, for example, updating the quantity
            originalOrder.qty = order.qty;
            // Notify the library about the order update so it appears in the UI
            this._host.orderUpdate(originalOrder);
            return Promise.resolve();
        }

        return handler();
    }

    cancelOrder(orderId: string): Promise<void> {
        // Look up the original order using its ID
        const order = this._orderById[orderId];

        const handler = () => {
            // Change order status to canceled
            order.status = OrderStatus.Canceled;
            // Notify the library about the order update so it appears in the UI
            this._host.orderUpdate(order);
            return Promise.resolve();
        }

        return handler();
    }

    chartContextMenuActions(
        context: TradeContext,
        options?: DefaultContextMenuActionsParams | undefined
    ): Promise<ActionMetaInfo[]> {
        return this._host.defaultContextMenuActions(context);
    }

    async isTradable(symbol: string): Promise<boolean | IsTradableResult> {
        return Promise.resolve(true);
    }

    connectionStatus(): ConnectionStatus {
        return ConnectionStatus.Connected;
    }

    executions(symbol: string): Promise<Execution[]> {
        return Promise.resolve([]);
    }

    async symbolInfo(symbol: string): Promise<InstrumentInfo> {

```

--------------------------------

### Serve Project Locally

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement_datafeed_tutorial/Datafeed-Implementation

Command to serve the project locally using npx serve. This is used to view the implemented datafeed in a web browser.

```bash
npx serve
```

--------------------------------

### Accessing the Watermark API

Source: https://www.tradingview.com/charting-library-docs/v29/ui_elements/watermarks

This snippet shows how to get an instance of the IWatermarkApi from the charting widget.

```APIDOC
## Accessing the Watermark API

To access the API, use the `watermark` method of the `IChartingLibraryWidget` interface.

### Method
```javascript
widget.onChartReady(() => {
    const watermarkApi = widget.watermark();
});
```
```

--------------------------------

### Get Study Inputs

Source: https://www.tradingview.com/charting-library-docs/v29/ui_elements/indicators

Retrieve the available input options for a specific indicator by its name.

```APIDOC
## Get Study Inputs

### Description
Retrieves the available input options for a specific indicator.

### Method
`widget.getStudyInputs(indicatorName)`

### Parameters
#### Path Parameters
- **indicatorName** (string) - Required - The name of the indicator (e.g., 'MACD').

### Response Example
```json
{
  "example": "[Array of input options for the indicator]"
}
```
```

--------------------------------

### Implement symbolInfo Method

Source: https://www.tradingview.com/charting-library-docs/v29/tutorials/implement-broker-api/enable-ui

Implement this method to return detailed instrument data. The example uses mock data and should be replaced with real instrument details from your backend.

```typescript
async symbolInfo(symbol: string): Promise<InstrumentInfo> {
    const mintick = await this._host.getSymbolMinTick(symbol);
    const pipSize = mintick; // Pip size can differ from minTick
    const accountCurrencyRate = 1; // Account currency rate
    const pointValue = 1; // USD value of 1 point of price
  
    return {
        qty: {
            min: 1,
            max: 1e12,
            step: 1,
        },
        pipValue: pipSize * pointValue * accountCurrencyRate || 1,
        pipSize: pipSize,
        minTick: mintick,
        description: '',
    };
}

```
Tokens:
Raw