Documentation | KB Institute

Getting Started with TradingView Charts

Integrating TradingView charts into your application is straightforward using their JavaScript library. Follow these steps to add interactive financial charts to your website.

Step 1: Include the TradingView Widget Script

First, add the TradingView Widget script to your HTML file:

<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>

Step 2: Create a Container for the Chart

Add a div element where the chart will be displayed:

<div id="tradingview_chart" style="height: 500px;"></div>

Step 3: Initialize the Widget

Create a new TradingView widget with your desired configuration:

new TradingView.widget({
  autosize: true,
  symbol: "NASDAQ:AAPL",
  interval: "D",
  timezone: "Etc/UTC",
  theme: "light",
  style: "1",
  locale: "en",
  toolbar_bg: "#f1f3f6",
  enable_publishing: false,
  allow_symbol_change: true,
  container_id: "tradingview_chart"
});

React Integration Example

Here's how to integrate TradingView in a React component:

import React, { useEffect, useRef } from 'react';

function TradingViewChart() {
  const containerRef = useRef(null);
  
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://s3.tradingview.com/tv.js';
    script.async = true;
    script.onload = () => {
      if (typeof TradingView !== 'undefined' && containerRef.current) {
        new window.TradingView.widget({
          autosize: true,
          symbol: "NASDAQ:AAPL",
          interval: "D",
          timezone: "Etc/UTC",
          theme: "light",
          style: "1",
          locale: "en",
          toolbar_bg: "#f1f3f6",
          enable_publishing: false,
          allow_symbol_change: true,
          container_id: "tradingview_chart"
        });
      }
    };
    document.head.appendChild(script);
    
    return () => {
      if (script.parentNode) {
        document.head.removeChild(script);
      }
    };
  }, []);

  return <div ref={containerRef} id="tradingview_chart" style={{ height: '500px' }} />;
}

export default TradingViewChart;