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. 🎉"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
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": [
"1d|1",
"5d|5",
"1m|30",
"1D|1D",
"60m|1W",
"all|1M"
],
/* ... the other options ...*/
"symbol": "BINANCE:BNBUSDT|1M" /* ← changed from 1M */"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 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.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()
});Last updated