Get started
Follow these steps to integrate Advanced Charts or Trading Platform into your project.
If you prefer a visual guide, watch our YouTube tutorial on how to download the repository and set up your first local project.
1. Get access
The libraries are hosted in a private GitHub repository. To get access:
- Go to the product landing page you need and submit the access request form.
- Once approved, you will receive a GitHub invitation to the repository.
Advanced Charts and Trading Platform should only be downloaded from the official TradingView repositories provided within this documentation. Obtaining the library from third-party services is strictly prohibited and may lead to legal consequences.
The library is not redistributable. It is prohibited to use any part of the library in public repositories.
2. Install the library
Choose the installation method that best fits your development environment.
- Direct download
- NPM
- Clone or download the ZIP from the Advanced Charts or Trading Platform repository.
- Create a project folder (e.g.,
/example). Copy the following folders from the repository into your project:charting_library/— core library files.datafeeds/— sample datafeed implementation.
-
Configure
package.json. Specify the library version using the#semvertag in your dependency list. Also note that files located innode_modules/charting_library/are not bundled during the build process. Ensure that these files are included on the server and can be accessed by a specific path.To do this, add a script to copy the files into a folder that serves static assets. In this example, the
publicfolder is used, but this may vary based on your project structure. Adjust thecopy-filescommand accordingly.package.json{
// For Advanced Charts
"dependencies": {
"charting_library": "git@github.com:tradingview/charting_library.git#semver:28.0.0"
},
// OR For Trading Platform
"dependencies": {
"charting_library": "git+ssh://git@github.com:tradingview/trading_terminal.git#semver:28.0.0"
},
"scripts": {
"postinstall": "npm run copy-files",
"copy-files": "cp -R node_modules/charting_library/ public"
}
} -
Execute the command below. This will download the library and automatically trigger the
postinstallscript to move the static files into the specified directory.npm installinfoInstallation will only work if your Git client is authenticated with GitHub. Ensure your SSH public key is added to your account.
3. Initialize the chart
To run the library, you need an HTML container and a script to initialize the Widget Constructor.
-
Create a container for the chart and include the necessary script references.
/example/index.html<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Core library script -->
<script src="charting_library/charting_library.standalone.js"></script>
<!-- Sample UDF datafeed implementation -->
<script src="datafeeds/udf/dist/bundle.js"></script>
</head>
<body>
<!-- Chart container -->
<div id="chartContainer"></div>
</body>
</html> -
Initialize the Widget Constructor inside
<body>to create a chart. This example uses sample UDF adapter so you can see a working chart immediately.<script>
new TradingView.widget({
container: 'chartContainer',
locale: 'en',
library_path: 'charting_library/',
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
symbol: 'AAPL',
interval: '1D',
fullscreen: true,
debug: true
});
</script>
4. Run the project
-
Run one of the following commands in your project folder (e.g.,
/example) to start a local server:- Python
- Node.js
- NGINX
# Python 2.x
python -m SimpleHTTPServer 9090
# Python 3.x
python -m http.server 9090# Install http-server
npm install http-server -g
# Start http-server
http-server -p 9090Add a server block to your
nginx.confand point the root to your project folder:server {
listen 9090;
server_name localhost;
// Replace with the absolute path to your /example folder
location / {
root ABSOLUTE_PATH_TO_THE_TUTORIAL_FOLDER;
}
} -
Open
http://localhost:9090in your web browser. You should see the chart rendering AAPL data.
Next steps
Connect your data source
Learn how to replace the demo feed with your own real-time data using the UDF adapter or Datafeed API.
Widget configuration
Master the Widget Constructor. Set up essential technical parameters, including default locale, timezones, and timeframe.
Framework integrations
View production-ready implementation examples and best practices for React, Angular, Vue, and other frameworks.
UI elements
Manage the visibility and behavior of the chart's interface, from toolbars and context menus to drawings and indicators.
Customization
Tailor the chart's appearance to your brand. Learn how to apply dark and light themes and override default colors and styles.
Broker integration
Enable order execution by connecting your brokerage backend to the chart using the Broker API.