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
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. 🎉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
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. 🎉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
// 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/
Last updated