Charts Structure

Charts, Graphs, and tickers are mainly powered by TradingView. So it's urgent to know about the structure of these widgets.

Below is sample coding structure:

<!-- TradingView Symbol Overview -->
<div class="tradingview-widget-container__widget card-bs">
    <script>
        ...
    </script>
</div>

<!-- ApexChart -->
<div class="flex mt-2">
    <div class="chart-area"></div>
</div>

TradingView Charts

This guide is designed to help you create a comprehensive stock symbol page using TradingView widgets. This page will provide up-to-date and accurate information about any stock you choose to display. The basic structure for this page will be built using simple HTML, while further functionality will be provided by integrating TradingView’s variety of widgets.

TradingView Ticker Widget

<!-- TradingView Ticker Tape -->
<div class="tradingview-widget-container__widget mb-2 card-bs">
    <script  src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
        {
        "symbols": [
            {
            "proName": "FOREXCOM:SPXUSD",
            "title": "S&P 500 Index"
            },
            {
            "proName": "FOREXCOM:NSXUSD",
            "title": "US 100 Cash CFD"
            },
            {
            "proName": "FX_IDC:EURUSD",
            "title": "EUR to USD"
            },
            {
            "proName": "BITSTAMP:BTCUSD",
            "title": "Bitcoin"
            },
            {
            "proName": "BITSTAMP:ETHUSD",
            "title": "Ethereum"
            }
        ],
        "showSymbolLogo": true,
        "isTransparent": true,
        "displayMode": "adaptive",
        "colorTheme": "dark",
        "locale": "en"
        }
    </script>
</div>

Customization

Symbols

For instance, if we want to display the details for the NVDA symbol
instead of AAPL, we simply need to update the value of "symbol" in the options.

/* ... the other options ...*/
"proName": "FOREXCOM:SPXUSD", /* ← changed from FOREXCOM:SPXUSD */

Symbol names are defined using the syntax {EXCHANGE}:{NAME}.

/* - While it’s possible to use a custom parameter (like symbol) and JavaScript 
to set the symbol manually, the tvwidgetsymbol parameter is recommended for 
single-symbol widgets as it works automatically. 🎉

Colors & Style

Symbol Overview Chart

<!-- TradingView Symbol Overview -->
<div class="tradingview-widget-container__widget card-bs">
    <script  src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-overview.js" async>
        {
        "symbols": [
        [
        "BINANCE:ETHUSDT|1M"
        ],
        [
        "BINANCE:NEARUSDT|1M"
        ],
        [
        "BINANCE:BTCUSDT|1M"
        ],
        [
        "BINANCE:LINKUSDT|1M"
        ],
        [
        "BINANCE:BNBUSDT|1M"
        ],
        [
        "BINANCE:DOGEUSDT|1M"
        ],
        [
        "BINANCE:SUIUSDT|1M"
        ],
        [
        "BINANCE:FTMUSDT|1M"
        ],
        [
        "BINANCE:SOLUSDT|1M"
        ]
        ],
        "chartOnly": false,
        "width": "100%",
        "height": "565",
        "locale": "en",
        "colorTheme": "dark",
        "autosize": true,
        "showVolume": true,
        "showMA": true,
        "hideDateRanges": false,
        "hideMarketStatus": false,
        "hideSymbolLogo": false,
        "scalePosition": "right",
        "scaleMode": "Normal",
        "fontFamily": "-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif",
        "fontSize": "14",
        "noTimeScale": false,
        "valuesTracking": "3",
        "changeMode": "price-and-percent",
        "chartType": "area",
        "maLineColor": "#2962FF",
        "maLineWidth": 1,
        "maLength": 9,
        "headerFontSize": "medium",
        "backgroundColor": "rgba(19, 23, 34, 0)",
        "lineType": 0,
        "dateRanges": [
        "1d|1",
        "5d|5",
        "1m|30",
        "1D|1D",
        "60m|1W",
        "all|1M"
        ],
        "upColor": "#22ab94",
        "downColor": "#f7525f",
        "borderUpColor": "#22ab94",
        "borderDownColor": "#f7525f",
        "wickUpColor": "#22ab94",
        "wickDownColor": "#f7525f"
        }
    </script>
</div>

Customization

Symbols

For instance, if we want to display the details for the NVDA symbol
instead of AAPL, we simply need to update the value of "symbol" in the options.

/* ... the other options ...*/
"symbol": "NASDAQ:NVDA" /* ← changed from NASDAQ:AAPL */

Symbol names are defined using the syntax {EXCHANGE}:{NAME}.

/* - While it’s possible to use a custom parameter (like symbol) and JavaScript 
to set the symbol manually, the tvwidgetsymbol parameter is recommended for 
single-symbol widgets as it works automatically. 🎉

DateRanges

Colors & Style

Set Widget Size

If you want to get more details about charts: https://www.tradingview.com/chart/

Warning: The majority of widgets require that either the height is defined within the widget options, or if ‘Use container size’ is selected that the container element should have a specific height defined by the CSS rule / style for that element.

Apex Charts

After loading all the files, you are ready to build your first chart. To create a chart with minimal configuration, write as follows

ApexCharts is a modern JavaScript library for creating interactive charts and visualizations with an easy-to-use API. For detailed instructions and additional options, please consult the Apex Charts Documentation.

// ApexChart
document.addEventListener('DOMContentLoaded', (event) => {
  const chartOptions = {
      chart: {
          type: "area",
          height: 120,
          toolbar: {
              show: false
          },
          zoom: {
              enabled: false
          }
      },
      colors: ["#0d6efd"],
      series: [{
          name: "Total Assets",
          data: [0.00, 0.00, 4.55, 0.00, 0.00, 0.00]
      }],
      dataLabels: {
          enabled: false
      },
      stroke: {
          width: 3,
          curve: "smooth"
      },
      fill: {
          type: "gradient",
          gradient: {
              shadeIntensity: 0,
              opacityFrom: 0.4,
              opacityTo: 0,
              stops: [0, 90, 100]
          }
      },
      xaxis: {
          categories: ["Feb", "Apr", "Jun", "Aug", "Oct", "Dec"],
          axisBorder: {
              show: false
          },
          labels: {
              style: {
                  colors: "#adb5bd",
                  fontFamily: "inter"
              }
          }
      },
      yaxis: {
          show: false
      },
      grid: {
          borderColor: "rgba(0, 0, 0, 0, 0)",
          padding: {
              top: -30,
              bottom: -8,
              left: 12,
              right: 12
          }
      },
      tooltip: {
          enabled: true,
          y: {
              formatter: value => `${value} BTC`
          },
          style: {
              fontFamily: "inter"
          }
      },
      markers: {
          show: true
      }
  }

  const chart = new ApexCharts(document.querySelector(".chart-area"), chartOptions)
  chart.render()
});

If you want to get more details about charts: https://apexcharts.com/