TradingView Charting Library Examples

To run this React integration example, follow these steps:

1. Access the Library: Ensure you have access to the TradingView Charting Library repository. If you do not have access, you must request it here.
2. Install Dependencies: Run npm install in the project root.
3. Copy Library Files: You must manually or via script move the library files into the project structure:
   • Option A (Script): Run the copy_charting_library_files.sh script to copy the current stable version's files automatically.
   • Option B (Manual):
     • Copy the charting_library folder from the official repository to both the /public and /src directories of this project.
     • Copy the datafeeds folder from the official repository to the /public directory.
4. Start the Application: Run npm start to build the project and launch the library in your default browser.

npm install
./copy_charting_library_files.sh
npm start

To run the React Native integration on Android, follow these steps:

1. Environment Setup: Follow the React Native Docs to install node, watchman, Java development kit, and the Android development environment.
2. Install Dependencies: Run npm install in the project root.
3. Integrate Charting Library Assets:
   • Open android/app/src/main/assets.
   • Copy all files from the charting_library repo into this directory.
   • Note: Do not just copy datafeeds and charting_library; you must copy the entire repository content. The earliest supported version is 23.
   • The resulting structure must be:
     • android/app/src/main/assets/index.html
     • android/app/src/main/assets/charting_library/
     • android/app/src/main/assets/datafeeds/
4. Run Application: Execute npx react-native run-android to install and start the app on a device.

To use the TradingView Charting Library within this Angular integration example, follow these steps:

1. Access the Library: Ensure you have access to the official charting library repository. If you do not have access, you must request it here.
2. Install Dependencies: Run npm install in the project root.
3. Copy Library Files: The library files must be placed in the /src/assets directory. You can do this in two ways:
   • Automated: Run the copy_charting_library_files.sh script to copy the current stable version's files.
   • Manual: Copy the charting_library folder and the datafeeds folder from the official charting_library repository into the /src/assets folder of this project.
4. Start the Dev Server: Run the Angular development server.

Note: The earliest supported version of the charting library for these examples is v28.0.0.

To use this Next.js integration example, you must first ensure you have access to the private TradingView Charting Library repository. Follow these steps to set up the environment:

1. Access Check: Verify you can view https://github.com/tradingview/charting_library/. If not, request access here.
2. Install Dependencies: Run npm install in the project root.
3. Copy Library Files: You must manually or via script move the library files into the project's public directory so they are served correctly.
   • Option A (Bash): Run the copy_charting_library_files.sh script to copy the current stable version's files.
   • Option B (Manual):
     • Copy the charting_library folder from the charting_library repository to /public/static.
     • Copy the datafeeds folder from the charting_library repository to /public/static.
4. Build and Run: Run npm run build followed by npm run start to build the project and launch it in your default browser.

Note: The earliest supported version of the charting library for these examples is v28.0.0.

To use this integration example, you must first ensure you have access to the private TradingView Charting Library repository. Follow these steps to set up the local environment:

1. Access the Library: Verify you can view https://github.com/tradingview/charting_library/. If not, request access here.
2. Install Dependencies: Run npm install in the project root.
3. Copy Library Files: The library files must be placed in the /public directory of the Nuxt project. You can do this in two ways:
   • Using the script: Run the copy_charting_library_files.sh script to automatically copy the current stable version's files.
   • Manual Copy: Manually copy the charting_library folder and the datafeeds folder from the <https://github.com/tradingview/charting_library/> repository into your project's /public folder.
4. Start Development Server: Run npm run dev to build the project and launch the library in your default browser.

To use this integration example, you must first ensure you have access to the private TradingView Charting Library repository. This example uses Charting Library version v28.0.0 and is specifically designed for Vue 2.

Prerequisites

1. Verify access to https://github.com/tradingview/charting_library/. If you cannot access it, request access here.

Installation Steps

1. Install dependencies: Run npm install to install the necessary Node packages.
2. Copy Charting Library files: The library files must be placed in the /public directory of this project. You can do this in two ways:
   • Automated: Run the copy_charting_library_files.sh script to copy the current stable version's files.
   • Manual:
     • Copy the charting_library folder from the official TradingView repository to the /public folder.
     • Copy the datafeeds folder from the official TradingView repository to the /public folder.
3. Start development server: Run npm run dev to build the project and open the Charting Library in your default browser.
4. Build for production: Run npm run build when you are ready to generate the production-ready Vue application.

To use this integration example, you must first ensure you have access to the private TradingView Charting Library repository. Follow these steps to set up the local development environment:

1. Access Check: Verify you can access https://github.com/tradingview/charting_library/. If not, request access here.
2. Install Dependencies: Run npm install to install the necessary Vue 3 and project dependencies.
3. Copy Library Files: The Charting Library files must be placed in the /public directory of this project. You can do this in two ways:
   • Automated: Run the copy_charting_library_files.sh script to copy the current stable version's files.
   • Manual: Copy the charting_library folder and the datafeeds folder from the official charting_library repository directly into the /public folder.
4. Start Development Server: Run npm run dev to build the project and launch the Charting Library in your default browser.
5. Production Build: Run npm run build to generate the production-ready Vue application.

To run the React Native integration on iOS, follow these steps:

1. Environment Setup: Follow the React Native Docs to install node, watchman, ruby (ensure the correct version), xCode, and cocoaPods.
2. Install Dependencies: Run npm install in the project root.
3. Configure Xcode Project:
   • Open /ios/ChartingLibraryExample.xcodeproj in Xcode.
   • Right-click on the charting_library folder and select "Add Files to ...".
   • Select all files from the charting_library repo (including html files, charting_library, and datafeeds folders).
   • CRITICAL: You must select the "Create folder references" option when adding files. This preserves the folder structure required to handle files with identical names located in different directories.
4. Install Pods: Run pod install within the ios folder.
5. Run Application: Execute npx react-native run-ios to install and start the app on a device.

npm install
cd ios && pod install && cd ..
npx react-native run-ios