TradingView Advanced Charts

https://www.tradingview.com/charting-library-docs/latest/introduction
Admin
Advanced Charts is a standalone client-side library for displaying financial charts, prices, and...
Tokens:2,022,602
Snippets:15,771
Trust Score:10
Update:1 day ago
Show doc for...
Tokens:
Raw
================
LIBRARY RULES
================
- Advanced Charts (also called Charting Library) is a self-hosted JS library for displaying charts with your own data. It is not Lightweight Charts, TradingView Widgets, or Pine Script; their APIs differ, so never mix them.
- Trading Platform is Advanced Charts plus trading features (Broker API, Account Manager, order panel, watchlist, news). It shares these docs. Pages marked "Trading Platform only" do not apply to Advanced Charts.
- Ask which product the user has if it matters: Advanced Charts comes from the tradingview/charting_library repo, Trading Platform from tradingview/trading_platform.
- Neither product includes market data. If the user only needs charts and has no data source, suggest the Advanced Chart widget instead, which shows TradingView data.
- These docs describe the latest library version. Check the user's version via TradingView.version() in the browser console or the #semver tag in package.json before relying on newer APIs.
- If the user runs an older version, warn that an API may be missing or different, and check the Release notes. Docs for older major versions are at https://www.tradingview.com/charting-library-docs/vNN/ (e.g. v31).
- When upgrading, read the Breaking Changes in Release notes for every version between the old and new one, and follow the Update the library guide.
- Advanced Charts and Trading Platform are not on the public npm registry. Install them from their private GitHub repos (git dependency with #semver:X.Y.Z) or copy the files after access is granted. Never invent a public package name.
- Serve the charting_library/ folder as static files and point the library_path widget option at it. Do not bundle or edit files in charting_library/bundles.
- Create the chart with new TradingView.widget({ container, library_path, datafeed, symbol, interval, ... }). Look up options on the Widget Constructor page.
- Connect data by implementing the Datafeed API (onReady, resolveSymbol, getBars, subscribeBars, unsubscribeBars) or via the UDF adapter in datafeeds/udf. Trading Platform also needs getQuotes, subscribeQuotes, unsubscribeQuotes.
- Trading Platform: connect trading by implementing the Broker API (IBrokerTerminal) and passing it via the broker_factory widget option. Start from Core trading concepts and the Implement Broker API tutorial.
- Call every datafeed callback asynchronously (e.g. setTimeout). Synchronous callbacks cause "Maximum call stack size exceeded".
- Bar time is a Unix timestamp in milliseconds, UTC. periodParams.from/to are in seconds. Return bars in ascending time order with unique times.
- Daily, weekly, and monthly bar time is 00:00:00 UTC of the trading day, not the session start.
- In getBars, return at least countBack bars, adding earlier bars if needed. If no older data exists, pass an empty array with noData set to true to stop requests.
- Turn UI features on or off with featuresets (enabled_features / disabled_features). Check the Featuresets page before writing custom code or CSS for something the library may already support.
- Types are in charting_library.d.ts and datafeed-api.d.ts (plus broker-api.d.ts for Trading Platform) in the user's library folder. They match the user's version; prefer them over guessing signatures.
- To save chart layouts and templates, use one of three approaches: the REST API via charts_storage_url, API handlers via save_load_adapter, or the low-level save and load widget methods.
- Prefer API handlers when the user needs auth headers, custom error handling, or chart templates. The REST API does not support chart templates.
- For any data or chart issue, first enable debug mode: set debug to true in the Widget Constructor or call setDebugMode. The console logs show requested versus received bars.
- Before fixing a datafeed bug, check Datafeed: common issues. For Trading Platform trading bugs, check Common Broker API issues. For memory leaks or CSP errors, see Troubleshooting.
- To validate a datafeed, suggest the charting-library-datafeed agent skill from the library repo. Its check-datafeed script calls the datafeed like the library and reports rule violations.
- To avoid memory leaks, call remove on the widget when removing the chart, unsubscribe from all data, and drop every reference to the widget and its API.
- The demo save/load storage from the Save and load REST API page is for testing only. Its data is regularly deleted, so never use it in production.
- A chart layout does not include the visible time range. User settings such as resolution or one-click trading are stored separately, via localStorage by default or settings_adapter.

================
CODE SNIPPETS
================
### Start the server with npm run start

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

Run this command from the project root to start the server. After starting, open http://127.0.0.1:3000 in your browser to verify the chart, symbol search, resolution switching, and historical data loading.

```bash
npm run start
```

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

### Start the project and open the trading page

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/tutorials/implement_datafeed_tutorial/extend-to-trading-platform.md

Run the start command and then open the trading page at the given URL. Use 'npm run start' instead of the static server because the news feed is proxied same-origin through server.mjs.

```bash
npm run start
```

```text
http://127.0.0.1:3000/trading
```

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

### Install Trading Platform runtime with npm

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/tutorials/implement_datafeed_tutorial/extend-to-trading-platform/

Run this command to install the Trading Platform runtime and the BrokerDemo sample bundle. It also installs Advanced Charts so the root page keeps working.

```bash
npm run tv:install:tp -- 31.2.0
```

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

### Run local server with Node.js http-server

Source: https://www.tradingview.com/charting-library-docs/latest/quick-start.md

Install and start the http-server package to serve the project folder on port 9090.

```bash
# Install http-server
npm install http-server -g
# Start http-server
http-server -p 9090
```

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

### Start local server

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

Starts the local server and provides the URL to open the chart.

```bash
npm run start
```

```text
http://127.0.0.1:3000
```

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

### library_path configuration example

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Specifies the path to the static folder containing the charting library. If hosting the library on a separate origin, refer to the cross-origin hosting guide.

```javascript
library_path: "charting_library/",
```

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

### Runtime location after installation

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

After installation, the runtime is available at this path.

```text
vendor/tradingview/advanced_charts/charting_library.esm.js
```

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

### Installed file locations

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/tutorials/implement_datafeed_tutorial/extend-to-trading-platform/

Shows the paths where the Trading Platform runtime and BrokerDemo bundle are placed after installation.

```text
vendor/tradingview/trading_platform/charting_library.esm.js
third_party/tradingview/broker-sample/dist/bundle.js
```

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

### getTimescaleMarks implementation example

Source: https://www.tradingview.com/charting-library-docs/latest/connecting_data/datafeed-api/additional-methods/

Example implementation of the getTimescaleMarks method. It logs an optional message, creates marks based on the symbol (AAPL gets two marks, others get one), and calls onDataCallback with the marks array. The method is only called if the datafeed supports marks.

```javascript
getTimescaleMarks = (
    symbolInfo,
    startDate,
    endDate,
    onDataCallback,
    resolution
) => {
    // optional
    console.log('getTimescaleMarks');

    let marks = [];

    if (symbolInfo.name === 'AAPL') {
        marks = [
            {
                id: 1,
                time: startDate,
                color: 'red',
                label: 'Aa',
                minSize: 30,
                tooltip: [
                    'Lorem',
                    'Ipsum',
                    'Dolor',
                    'Sit',
                ]
            },
            {
                id: 2,
                time: startDate + 5260000, // 2 months
                color: 'blue',
                label: 'B',
                minSize: 30,
                tooltip: [
                    'Amet',
                    'Consectetur',
                    'Adipiscing',
                    'Elit',
                ]
            }
        ];
    } else {
        marks = [
            {
                id: 'String id',
                time: endDate,
                color: 'red',
                label: 'T',
                tooltip: ['Nulla']
            }
        ];
    }

    onDataCallback(marks);
};
```

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

### get method index example

Source: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.IPineSeries/

Illustrates how the get method indexes are reversed: s.get(1) returns the second last value, s.get(2) the third last, and so on.

```ts
- s.get(1) returns second last,
- s.get(2) - third last
- and so on
```

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

### Get all studies with getAllStudies()

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Returns an array of study information. Example logs each study's name.

```javascript
widget.activeChart().getAllStudies().forEach(({ name }) => console.log(name));
```

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

### settings_adapter configuration example

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Shows how to configure the settings_adapter with initial settings and set/remove functions to save user settings to preferred storage.

```javascript
settings_adapter: {
    initialSettings: {
        "symbolWatermark": '{ "visibility": "true", "color": "rgba(244, 67, 54, 0.25)" }',
        "trading.Broker": '{"qty": {"AAPL": 10, "NasdaqNM:AAPL": 10}, "orderType": {"NasdaqNM:AAPL": 3}}',
    },
    setValue: function(key, value) {
        console.log(`set value: ${key} ${value}`);
    },
    removeValue: function(key) {
        console.log(`remove value: ${key}`);
    },
}
```

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

### Clone tutorial repository

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

Clones the tutorial repository and navigates into it.

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

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

### Get all shapes with getAllShapes()

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Returns an array of drawing information. Example logs each shape's name.

```javascript
widget.activeChart().getAllShapes().forEach(({ name }) => console.log(name));
```

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

### interval(ctx)

Source: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.PineJSStd/

Gets the symbol interval. For example, if the symbol has a resolution of 1D, this function returns 1.

```APIDOC
## interval(ctx)

### Description
Gets the symbol interval. For example, if the symbol has a resolution of 1D, this function returns 1.

### Method
Function call

### Parameters
- `ctx` (IContext) - Required - PineJS execution context.

### Returns
number - Symbol interval.
```

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

### watchList: Get active list and append items

Source: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.IChartingLibraryWidget/

Trading Platform only. Resolves with an IWatchListApi object. The example retrieves the active list ID, gets its items, and appends a new section and item to the current watchlist.

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

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

### Run local server with Python

Source: https://www.tradingview.com/charting-library-docs/latest/quick-start.md

Start a local HTTP server using Python 2.x or 3.x to serve the project folder.

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

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

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

### Get Drawing by ID with getShapeById

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Retrieves an API object for interacting with a drawing by its ID. The example brings the drawing to the front.

```javascript
widget.activeChart().getShapeById(id).bringToFront();
```

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

### npm install command

Source: https://www.tradingview.com/charting-library-docs/latest/quick-start.md

Run this command to download the library and automatically trigger the postinstall script to move static files. Requires Git client authenticated with GitHub, with SSH public key added to your account.

```bash
npm install
```

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

### adopt method example

Source: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.IPineSeries/

Shows how to use the adopt method with continuous and precise modes. The example creates pine series and demonstrates the resulting values for each mode.

```javascript
// A pine series with values [5, 5]
const sourceTimes = ctx.new_var();
// A pine series with values [4, 5]
const destinationTimes = ctx.new_var();
// A pine series with values [1, 2]
const values = ctx.new_var();

// Creates a pine series with values [2, 2]
const adopted1 = values.adopt(sourceTimes, destinationTimes, 0);

// Creates a pine series with values [NaN, 2]
const adopted2 = values.adopt(sourceTimes, destinationTimes, 1);
```

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

### Example response for Get bars

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

A JSON object with status 'ok' and arrays for timestamps, close, open, high, low, and volume.

```javascript
{
    s: "ok",
    t: [1386493512, 1386493572, 1386493632, 1386493692],
    c: [42.1, 43.4, 44.3, 42.8],
    o: [41.0, 42.9, 43.7, 44.5],
    h: [43.0, 44.1, 44.8, 44.5],
    l: [40.4, 42.1, 42.8, 42.3],
    v: [12000, 18500, 24000, 45000]
}
```

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

### Install dependencies with npm

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/how-to-guides/implement-snapshots-server.md

Run these commands in a new folder to initialize a Node.js project and install Express, Multer, and CORS packages.

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

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

### Get main series and set visibility

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Retrieves the main series and calls setVisible(false) on it. The example uses widget.activeChart().getSeries().setVisible(false).

```javascript
widget.activeChart().getSeries().setVisible(false);
```

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

### subscribeQuotes implementation with setInterval

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

Example implementation of subscribeQuotes that sets up an interval to call getQuotes every 5 seconds. Uses a global variable `_quotesSubscriptions` to store the interval for later cleanup in unsubscribeQuotes. The example is a starting point and may need to be adapted to fit specific requirements.

```javascript
subscribeQuotes(symbols, fastSymbols, onRealtimeCallback, listenerGUID) {
    // In this example, `_quotesSubscriptions` is a global variable used to clear the subscription in `unsubscribeQuotes`
    this._quotesSubscriptions[listenerGUID] = setInterval(() => this.getQuotes(symbols.concat(fastSymbols), onRealtimeCallback, () => undefined), 5000);
}
```

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

### startFullscreen(): void

Source: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.IChartingLibraryWidget/

Sets the chart into fullscreen mode (if it isn't already).

```APIDOC
## startFullscreen(): void

### Description
Sets the chart into fullscreen mode (if it isn't already).

### Method
startFullscreen

```

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

### Initialize app and create uploads folder

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/how-to-guides/implement-snapshots-server.md

Sets up the Express app, enables CORS, and creates the uploads directory if it doesn't exist.

```javascript
const app = express();
const port = 3001;

// `cors()` allows your app to accept requests from anywhere
app.use(cors());

// Check if `uploads/` exists
// If not, it creates the folder
const uploadDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir);
}
```

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

### Symbol group response example for GET /symbol_info?group=NYSE

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

Example JSON response for the symbol group request. The response follows the 'response-as-a-table' concept, where each property is a column with either a single value or an array of values. This endpoint is only used if the /config response includes supports_group_request: true.

```javascript
{
   symbol: ["AAPL", "MSFT", "SPX"],
   description: ["Apple Inc", "Microsoft corp", "S&P 500 index"],
   exchange_listed_name: ["NASDAQ", "NASDAQ", "TVC"],
   minmovement: 1,
   minmovement2: 0,
   pricescale: [1, 1, 100],
   has-intraday: true,
   type: ["stock", "stock", "index"],
   ticker: ["AAPL~0", "MSFT~0", "$SPX500"],
   timezone: "America/New_York",
   session-regular: "0900-1600",
}
```

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

### Custom Study init method example

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Example of the init method for a custom study, showing how to initialize variables and request additional symbols using context.new_sym.

```typescript
this.init = function(context, inputCallback) {
    var symbol = '#EQUITY';
    var period = PineJS.Std.period(this._context);
    context.new_sym(symbol, period);
};
```

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

### Get study by ID and set visibility

Source: https://www.tradingview.com/charting-library-docs/charting_library.d.ts

Retrieves a study by its ID and calls setVisible(false) on it. The example uses widget.activeChart().getStudyById(id).setVisible(false).

```javascript
widget.activeChart().getStudyById(id).setVisible(false);
```

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

### Iterate over all charts using chartsCount()

Source: https://www.tradingview.com/charting-library-docs/latest/configuration/widget-methods/

Use chartsCount() to get the total number of charts and loop through each chart with chart(i). The example logs the symbol name of each chart.

```javascript
for (let i = 0; i < widget.chartsCount(); i++) { console.log(widget.chart(i).symbolExt().name) }
```

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

### Run new version with npx serve

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

Use this command in a command line to serve the folder containing the new library version. The resulting URL can be opened in a browser to verify the version.

```javascript
npx serve <PATH_TO_YOUR_FOLDER>
```

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

### resolveSymbol

Source: https://www.tradingview.com/charting-library-docs/latest/connecting_data/datafeed-api/required-methods.md

Resolves symbol information for the datafeed. This method is called by the library to get symbol details. The example returns simple symbol information for the TEST symbol and an error for all other symbols.

```APIDOC
## resolveSymbol

### Description
Resolves symbol information for the datafeed. This method is called by the library to get symbol details. The example returns simple symbol information for the TEST symbol and an error for all other symbols.

### Method
resolveSymbol

### Parameters
- **symbolName** (string) - Required - The symbol name to resolve.
- **onSymbolResolvedCallback** (function) - Required - Callback to invoke with the symbol information.
- **onResolveErrorCallback** (function) - Required - Callback to invoke if the symbol cannot be resolved.
- **extension** (object) - Optional - Additional extension data.

### Request Example
```javascript
resolveSymbol(symbolName, onSymbolResolvedCallback, onResolveErrorCallback, extension) {
    setTimeout(
        () => {
            // Return some simple symbol information for the TEST symbol
            if (symbolName === 'TEST') {
                onSymbolResolvedCallback({
                    "name": "TEST",
                    "timezone": "America/New_York",
                    "minmov": 1,
                    "minmov2": 0,
                    "pointvalue": 1,
                    "session": "24x7",
                    "has_intraday": false,
                    "visible_plots_set": "c",
                    "description": "Test Symbol",
                    "type": "stock",
                    "supported_resolutions": [
                        "D"
                    ],
                    "pricescale": 100,
                    "ticker": "TEST",
                    "exchange": "Test Exchange",
                    "has_daily": true,
                    "format": "price"
                });
            } else {
                // Ignore all other symbols
                onResolveErrorCallback('unknown_symbol');
            }
        },
        50
    );
}
```

### Response
#### Success Response
- **name** (string) - Symbol name.
- **timezone** (string) - Timezone of the symbol.
- **minmov** (number) - Minimum movement.
- **minmov2** (number) - Minimum movement 2.
- **pointvalue** (number) - Point value.
- **session** (string) - Trading session.
- **has_intraday** (boolean) - Whether intraday data is available.
- **visible_plots_set** (string) - Visible plots set.
- **description** (string) - Description of the symbol.
- **type** (string) - Symbol type.
- **supported_resolutions** (array) - Supported resolutions.
- **pricescale** (number) - Price scale.
- **ticker** (string) - Ticker symbol.
- **exchange** (string) - Exchange name.
- **has_daily** (boolean) - Whether daily data is available.
- **format** (string) - Price format.

#### Error Response
- **error** (string) - Error message, e.g., 'unknown_symbol'.
```

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

### Server startup output

Source: https://www.tradingview.com/charting-library-docs/latest/tutorials/how-to-guides/implement-snapshots-server.md

Expected output when the snapshot server starts successfully, indicating it is listening on port 3001.

```bash
Listening at http://localhost:3001
```
Tokens:
Raw