Volver a la bibliotecaWatchlists

Market Overview

ID del componente: market-overview

Diseñado para obtener una visión macro de los mercados. Funciona particularmente bien en homepages de sitios financieros, proporcionando una visión general de diferentes categorías de activos.

Demo Interactiva

Ejemplos Prácticos

Global Markets

Visión general de mercados globales

{
  "tabs": [
    {
      "title": "Indices",
      "symbols": [
        [
          "S&P 500",
          "OANDA:SPX500USD"
        ],
        [
          "Nasdaq",
          "OANDA:US100USD"
        ]
      ]
    },
    {
      "title": "Forex",
      "symbols": [
        [
          "EUR/USD",
          "FX:EURUSD"
        ],
        [
          "GBP/USD",
          "FX:GBPUSD"
        ]
      ]
    }
  ]
}

Dark Dashboard

Panel de mercado en modo oscuro

{
  "colorTheme": "dark"
}

Ejemplo de Código

JavaScript / React
import { MarketOverview } from '@/components/tradingview';

export default function MyPage() {
  // Configura tu widget con los parámetros que necesites
  const config = {
    // Personaliza estos parámetros según tus necesidades
    symbol: 'NASDAQ:AAPL',
    theme: 'light',
    // ... más parámetros
  };

  return (
    <div>
      <h1>Mi Gráfico TradingView</h1>
      <MarketOverview config={config} />
    </div>
  );
}

Parámetros de Configuración

showChartboolean

true

localestring

"en"

widthstring

"100%"

heightstring

"100%"

largeChartUrlstring

""

isTransparentboolean

false

colorThemestring

"light"

tabsobject

[{"title":"Indices","symbols":[["S&P 500","OANDA:SPX500USD"],["Nasdaq 100","OANDA:US100USD"]]},{"title":"Commodities","symbols":[["Gold","TVC:GOLD"],["Silver","TVC:SILVER"]]},{"title":"Bonds","symbols":[["US 10Y","TVC:US10Y"],["Euro Bund","TVC:GE10Y"]]},{"title":"Forex","symbols":[["EUR/USD","FX:EURUSD"],["GBP/USD","FX:GBPUSD"]]}]

Ver documentación oficial

Más opciones y detalles