Skip to main content

Symbol Overview Widget

This is the React component for the Symbol Overview Widget


import { SymbolOverview } from "react-ts-tradingview-widgets";
<SymbolOverview colorTheme="dark"
wickDownColor="#800080" />
AAPL By TradingView

Used Private types#

FontSize"10" / "11" / "12" / "13" / "14" / "16" / "18" / "20" / "22" / "24" / "28"
ValuesTracking"0" / "1" / "2" / "3"
LineWidth1 / 2 / 3 / 4
TimeHoursFormat"12-hours" / "24-hours"

Used Public types#

ColorThemelight / dark
ScalePositionno / left / right
ScaleModeNormal / Percentage / Logarithmic
ChartTypearea / bars / candlesticks
DateFormat/ "dd MMM 'yy" / "MMM dd, yyyy" / "MMM dd" / "dd MMM" / "yyyy-MM-dd" / "yy-MM-dd" / "yy/MM/dd" / "yyyy/MM/dd" / "dd-MM-yyyy" / "dd-MM-yy" / "dd/MM/yy" / "dd/MM/yyyy" / "MM/dd/yy" / "MM/dd/yyyy"


symbolsstring[][]falseSee here
chartOnlybooleanfalsefalseChart only in widget
widthnumber/stringfalse1000Sets a static width on the component
heightnumber/stringfalse400Sets a static height on the component
autosizebooleanfalsefalseSets the width and height to 100%
colorThemeColorThemefalselightSets the default theme
localestringfalseenSets the default locale
gridLineColorstringfalse#F0F3FAGrid color
fontColorstringfalse#787B86Font color
fontSizestringfalse10Font size in widget
isTransparentbooleanfalsefalseTransparent background for component
showFloatingTooltipbooleanfalsetrueShow floating tooltip
scalePositionScalePositionfalsenoScale position
scaleModeScaleModefalseNormalSets the scale type
fontFamilystringfalseTrebuchet MS, sans-serifSet the chart font
noTimeScalebooleanfalsefalseInclude a time scale or not
valuesTrackingValuesTrackingfalse1Floating tooltip, Colored tooltip, Legend, Scale labels
lineWidthLineWidthfalse3Width of ticker line
showVolumebooleanfalsefalseShow volume indicator
volumeUpColorstringfalsergba(34, 171, 148, 0.5)Set the volume up color of the indicator
volumeDownColorstringfalsergba(247, 82, 95, 0.5)Set the volume down color of the indicator
dateFormatDateFormatfalsedd MMM 'yySets the date format in the widget
timeHoursFormatTimeHoursFormatfalse24-hoursSets the time format
hideMarketStatusbooleanfalsefalseShows market status or not
hideDateRangesbooleanfalsefalseHides or shows date ranges
backGroundColorstringfalsergba(19, 23, 34, 0)Sets the background color in the widget
widgetFontColorstringfalsergba(216, 216, 216, 1)Sets the font color in the widget
chartTypeChartTypefalseareaSets the chart type
lineColorstringfalse#2962FFSets the line color, chartType area only.
bottomColorstringfalsergba(41, 98, 255, 0)Sets the bottom color, chartType area only.
topColorstringfalsergba(41, 98, 255, 0.3)Sets the top color, chartType area only.
upColorstringfalse#26a69aSets the default up color, chartType bars or candlesticks only
downColorstringfalse#26a69aSets the default down color, chartType bars or candlesticks only
borderUpColorstringfalse#26a69aSets the default borderUp color, chartType candlesticks only
borderDownColorstringfalse#ef5350Sets the default borderDown color, chartType candlesticks only
wickUpColorstringfalse#26a69aSets the default wickUp color, chartType candlesticks only
wickDownColorstringfalse#ef5350Sets the default wickDown color, chartType candlesticks only
container_idstringfalsesymbol-overview-widget-containerSet container_id generated here

Default symbols#

["Apple", "AAPL"],
["Google", "GOOGL"],
["Microsoft", "MSFT"]