DOCSEARCHbyAlgolia
Submit Docs

react-ts-tradingview-widgets Documentation

website·Indexed 31 days ago

https://tradingview-widgets.jorrinkievit.xyz/

Official documentation for react-ts-tradingview-widgets, a library providing fully TypeScript-supported React components for TradingView widgets. Includes components for Advanced Real-Time Chart, Market Overview, Timeline, Ticker Tape, Economic Calendar, and various heatmaps for stocks and cryptocurrency.

Tokens
10.6K
Snippets
57
Records
74
Agent score
54%

What's inside react-ts-tradingview-widgets

  1. Implement the Symbol Overview Widget using SymbolOverview

    The SymbolOverview component is a React wrapper for the TradingView Symbol Overview Widget. It allows developers to embed a financial symbol overview with customizable themes, chart types, and color schemes.
    import { SymbolOverview } from "react-ts-tradingview-widgets";

<SymbolOverview 
  colorTheme="dark"
  autosize
  chartType="candlesticks"
  downColor="#800080"
  borderDownColor="#800080"
  wickDownColor="#800080" 
/>

  2. Configure the Symbol Overview Widget component

    The Symbol Overview Widget can be customized using the following properties to control its appearance, behavior, and data display. Most properties are optional and have sensible defaults.
    // Example property usage
<SymbolOverviewWidget
  symbols={[['Apple', 'AAPL'], ['Google', 'GOOGL']]}
  chartOnly={false}
  width={1000}
  height={400}
  autosize={false}
  colorTheme="light"
  locale="en"
  chartType="area"
  lineColor="#2962FF"
/>

  3. Embed the Fundamental Data Widget using the FundamentalData component

    The FundamentalData component allows you to embed a TradingView Fundamental Data Widget into a React application. It supports customization of the ticker symbol, theme, dimensions, and display mode.
    import { FundamentalData } from "react-ts-tradingview-widgets";

<FundamentalData 
  colorTheme="dark" 
  height={400} 
  width="100%"
/>

  5. Symbol Overview Widget property reference

    Detailed list of available properties for the Symbol Overview Widget:

    Layout & Sizing

    • width (number/string): Static width. Default: 1000.
    • height (number/string): Static height. Default: 400.
    • autosize (boolean): If true, sets width and height to 100%. Default: false.
    • container_id (string): The ID of the container. Default: symbol-overview-widget-container.

    Visuals & Theme

    • colorTheme (ColorTheme): Default theme. Default: light.
    • backgroundColor (string): Background color. Default: rgba(19, 23, 34, 0).
    • isTransparent (boolean): Transparent background. Default: false.
    • gridLineColor (string): Grid color. Default: #F0F3FA.
    • fontFamily (string): Chart font. Default: Trebuchet MS, sans-serif.
    • fontColor (string): Font color. Default: #78B86.
    • fontSize (string): Font size. Default: 10.
    • widgetFontColor (string): Widget font color. Default: rgba(216, 216, 216, 1).

    Chart Configuration

    • chartType (ChartType): Type of chart. Default: area.
    • chartOnly (boolean): Show only the chart in the widget. Default: false.
    • showVolume (boolean): Show volume indicator. Default: false.
    • noTimeScale (boolean): Whether to include a time scale. Default: false.
    • scalePosition (ScalePosition): Position of the scale. Default: no.
    • scaleMode (ScaleMode): Scale type. Default: Normal.

    Chart Colors (Conditional)

    • For chartType: 'area': lineColor (#2962FF), bottomColor (rgba(41, 98, 255, 0)), topColor (rgba(41, 98, 255, 0.3)).
    • For chartType: 'bars' or 'candlesticks': upColor (#26a69a), downColor (#26a69a).
    • For chartType: 'candlesticks' only: borderUpColor (#26a69a), borderDownColor (#ef5350), wickUpColor (#26a69a), wickDownColor (#ef5350).
    • Volume colors: volumeUpColor (rgba(34, 171, 148, 0.5)), volumeDownColor (rgba(247, 82, 95, 0.5)).

    Data & Localization

    • symbols (string[][]): Array of symbol pairs. See default symbols for format.
    • locale (Locales): Default locale. Default: en.
    • dateFormat (DateFormat): Date format. Default: dd MMM 'yy.
    • timeHoursFormat (TimeHoursFormat): Time format. Default: 24-hours.

    UI Elements

    • showFloatingTooltip (boolean): Show floating tooltip. Default: true.
    • hideMarketStatus (boolean): Hide market status. Default: false.
    • hideDateRanges (boolean): Hide date ranges. Default: false.
    • valuesTracking (ValuesTracking): Controls tooltip, legend, and scale labels. Default: 1.
    • lineWidth (LineWidth): Width of ticker line. Default: 3.

  6. Get started with TradingView Widgets components

    The TradingView Widgets library provides fully customizable components that can be imported directly into a project for quick setup. All components are written in TypeScript and provide full type support.

  7. Use the SymbolInfo React component

    The SymbolInfo component is a React wrapper for the TradingView Symbol Info Widget. It allows you to display detailed information about a specific financial symbol.
    import { SymbolInfo } from "react-ts-tradingview-widgets";

<SymbolInfo colorTheme="dark" autosize></SymbolInfo>

  8. Supported TradingView Widgets in react-ts-tradingview-widgets

    The react-ts-tradingview-widgets library provides TypeScript components for the following TradingView widgets:

    • Advanced Real-Time Chart Widget
    • Technical Analysis Widget
    • Market Overview Widget
    • Market Data Widget
    • Stock Market Widget
    • Economic Calendar Widget
    • Ticker Widget
    • Ticker Tape Widget
    • Single Ticker Widget
    • Mini Chart Widget
    • Symbol Overview Widget
    • Symbol Info Widget
    • Forex Cross Rates Widget
    • Forex Heat Map Widget
    • Screener Widget
    • Cryptocurrency Market Widget
    • Fundamental Data Widget
    • Company Profile Widget
    • Timeline Widget

  9. Implement the MarketOverview widget

    The MarketOverview component renders a TradingView Market Overview widget. It allows developers to display a set of financial instruments organized by tabs, featuring charts and price movements.
    import { MarketOverview } from "react-ts-tradingview-widgets";

<MarketOverview 
  colorTheme="dark" 
  height={400} 
  width="100%" 
  showFloatingTooltip 
/>

  11. Example configuration for MarketOverview tabs

    This example demonstrates how to structure the tabs array to include Indices, Commodities, Bonds, and Forex categories.
    [
  {
    "title": "Indices",
    "originalTitle": "Indices",
    "symbols": [
      { "s": "FOREXCOM:SPXUSD", "d": "S&P 500" },
      { "s": "FOREXCOM:NSXUSD", "d": "Nasdaq 100" }
    ]
  },
  {
    "title": "Forex",
    "originalTitle": "Forex",
    "symbols": [
      { "s": "FX:EURUSD" },
      { "s": "FX:GBPUSD" }
    ]
  }
]

  12. Screener market and filter options

    The available values for defaultColumn and defaultScreen vary based on whether the market is a country or a forex/crypto market.
    // MarketForexOrCrypto: 'forex' | 'crypto'
const DefaultColumnForexOrCrypto = 'overview' | 'performance' | 'oscillators' | 'moving_averages';
const DefaultScreenForexOrCrypto = 'general' | 'top_gainers' | 'top_losers' | 'ath' | 'atl' | 'above_52wk_high' | 'below_52wk_low' | 'monthly_high' | 'monthly_low' | 'most_volatile' | 'overbought' | 'oversold' | 'outperforming_SMA50' | 'underperforming_SMA50';

// MarketCountries: 'america' | 'australia' | 'canada' | 'egypt' | 'germany' | 'india' | 'israel' | 'italy' | 'luxembourg' | 'poland' | 'sweden' | 'turkey' | 'uk' | 'vietnam'
const DefaultColumnCountries = 'overview' | 'performance' | 'valuation' | 'dividends' | 'margins' | 'income_statement' | 'balance_sheet' | 'oscillators' | 'moving_averages';
const DefaultScreenCountries = 'most_capitalized' | 'volume_leaders' | 'top_gainers' | 'top_losers' | 'ath' | 'atl' | 'high_dividend' | 'above_52wk_high' | 'below_52wk_low' | 'most_volatile' | 'unusual_volume' | 'overbought' | 'oversold' | 'outperforming_SMA50' | 'underperforming_SMA50' | 'earnings_this_week';