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

"showSymbolLogo": true, /* ← show/hide from true or false */

"isTransparent": true,
Set weather the chart should be transparent or have a default background
# isTransparent

"displayMode": "adaptive",
"colorTheme": "dark", /* ← add from dark or light */

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

"dateRanges": [
    "1d|1",
    "5d|5",
    "1m|30",
    "1D|1D",
    "60m|1W",
    "all|1M"
],

/* ... the other options ...*/
"symbol": "BINANCE:BNBUSDT|1M" /* ← changed from 1M */

Colors & Style

"theme": "dark", /* ← add from dark or light */
"colorTheme": "dark",

/* ... add custom color ...*/
"backgroundColor": "rgb(23, 26, 31)", /* ← changed from rgb(23, 26, 31) */
"upColor": "", /* ← add color */
"downColor": "", /* ← add color */
"borderUpColor": "", /* ← add color */
"borderDownColor": "", /* ← add color */
"wickUpColor": "", /* ← add color */
"wickDownColor": "", /* ← add color */

Set weather the chart should be transparent or have a default background
# isTransparent

"style": "1", /* ← add style 1 to 9 */

Set Widget Size

/* ... Set the container height and width ...*/

"width": "100%",
 "height": "565", /* ← changed from 565 */
 
 /* - To fix this, set a height for the <div> container in the CSS file, for example 
 height: 565px;. The widget will be displayed correctly, 
 without appearing collapsed.

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/