Skip to main content

Market Data Widget

This is the React component for the Market Data Widget

Example#

import { MarketData } from "react-ts-tradingview-widgets";
<MarketData colorTheme="dark" width="100%" height={400}></MarketData>

Used Public types#

TypeValue
ColorThemelight / dark
MarketDataSymbolsGroupSee here
MarketDataSymbolSee here

MarketData properties#

PropertyTypeRequiredDefaultDescription
widthnumber/stringfalse770Sets a static width on the component
heightnumber/stringfalse450Sets a static height on the component
autosizebooleanfalsefalseSets the width and height to 100%
symbolsGroupsMarketDataSymbolsGroup[]falseSee hereDefault symbols used in widget
showSymbolLogobooleanfalsetrueShow symbol of ticker
colorThemeColorThemefalselightSets the default theme
isTransparentbooleanfalsefalseTransparent background for component
localeLocalesfalseenSets the default locale
largeChartUrlstringfalseundefinedMake widget redirect to larger chart

MarketDataSymbolsGroup properties#

PropertyTypeRequiredDefaultDescription
namestringtrueSee hereName of the symbolgroup
originalNamestringtrueSee hereOriginal name of the symbolgroup
symbolsMarketDataSymbol[]trueSee hereArray of symbols

MarketDataSymbol properties#

PropertyTypeRequiredDefaultDescription
namestringtrueSee hereName of the symbol
displayNamestringfalseSee hereDisplay name of the symbol

Default symbolsGroup value#

[
{
"name": "Indices",
"originalName": "Indices",
"symbols": [
{
"name": "FOREXCOM:SPXUSD",
"displayName": "S&P 500"
},
{
"name": "FOREXCOM:NSXUSD",
"displayName": "Nasdaq 100"
},
{
"name": "FOREXCOM:DJI",
"displayName": "Dow 30"
},
{
"name": "INDEX:NKY",
"displayName": "Nikkei 225"
},
{
"name": "INDEX:DEU30",
"displayName": "DAX Index"
},
{
"name": "FOREXCOM:UKXGBP",
"displayName": "UK 100"
}
]
},
{
"name": "Commodities",
"originalName": "Commodities",
"symbols": [
{
"name": "CME_MINI:ES1!",
"displayName": "S&P 500"
},
{
"name": "CME:6E1!",
"displayName": "Euro"
},
{
"name": "COMEX:GC1!",
"displayName": "Gold"
},
{
"name": "NYMEX:CL1!",
"displayName": "Crude Oil"
},
{
"name": "NYMEX:NG1!",
"displayName": "Natural Gas"
},
{
"name": "CBOT:ZC1!",
"displayName": "Corn"
}
]
},
{
"name": "Bonds",
"originalName": "Bonds",
"symbols": [
{
"name": "CME:GE1!",
"displayName": "Eurodollar"
},
{
"name": "CBOT:ZB1!",
"displayName": "T-Bond"
},
{
"name": "CBOT:UB1!",
"displayName": "Ultra T-Bond"
},
{
"name": "EUREX:FGBL1!",
"displayName": "Euro Bund"
},
{
"name": "EUREX:FBTP1!",
"displayName": "Euro BTP"
},
{
"name": "EUREX:FGBM1!",
"displayName": "Euro BOBL"
}
]
},
{
"name": "Forex",
"originalName": "Forex",
"symbols": [
{
"name": "FX:EURUSD"
},
{
"name": "FX:GBPUSD"
},
{
"name": "FX:USDJPY"
},
{
"name": "FX:USDCHF"
},
{
"name": "FX:AUDUSD"
},
{
"name": "FX:USDCAD"
}
]
}
]