Integrations · TradingView · Charts

Provider charts

Four chart widgets, from a sparkline in a card to the full TradingView terminal. Use them when a standard market chart is enough — Luc UI's own engines take over the moment the data, the overlays or the interaction has to be yours.

Advanced Chart

The full provider chart. iframe format, so the chart, its toolbars and its attribution are TradingView's own.

AdvancedChart

iframe

The full TradingView chart: candles, studies, drawing tools, comparison symbols and a watchlist side panel.

Provider docs

AdvancedChart

iframe

preset="minimal" — candles and volume, no toolbar. The reading view.

Provider docs

AdvancedChart

iframe

preset="analysis" — drawing tools, details and date ranges on the TVC:USOIL contract.

Provider docs

Mini Chart

The card-sized chart. Web Component format, so it follows Luc UI's tokens directly.

MiniChart

Web Component

Apple

Provider docs

MiniChart

Web Component

Bitcoin

Provider docs

MiniChart

Web Component

EUR/USD

Provider docs

chartOnly drops the header for a pure sparkline; lineChartType switches between area, line and baseline.

Symbol Overview

A compact multi-symbol chart with ranges and overlays. One iframe draws all three series and links each one in its attribution line.

SymbolOverview

iframe

A compact multi-symbol chart with date ranges, volume and moving-average overlays.

Provider docs

Seasonal Chart

Multi-year seasonal pattern. A research-shaped view the provider already computes.

SeasonalChart

Web Component

Multi-year seasonal pattern by asset — the research view of seasonality.

Provider docs

Usage

import { TradingViewAdvancedChart } from "@luc/ui/tradingview";

<TradingViewAdvancedChart
  symbol="BINANCE:BTCUSDT"
  preset="standard"
  interval="D"
  height={560}
/>

The full provider chart; `preset` selects the amount of provider chrome.

import { TradingViewMiniChart } from "@luc/ui/tradingview";

<TradingViewMiniChart symbol="NASDAQ:AAPL" height={180} />

The compact Web Component chart for a market card or summary row.

import { TradingViewSymbolOverview } from "@luc/ui/tradingview";

<TradingViewSymbolOverview
  symbols={[
    { title: "Apple", symbol: "AAPL|1D" },
    { title: "Microsoft", symbol: "MSFT|1D" },
  ]}
  showVolume
  height={420}
/>

One provider chart carries several symbols and their attribution links.

import { TradingViewSeasonalChart } from "@luc/ui/tradingview";

<TradingViewSeasonalChart symbol="NASDAQ:AAPL" showAverage height={400} />

The provider-computed seasonal view for one instrument.

Configuration

`symbol`, `height` and `theme` are shared. The advanced chart adds `interval`, `style`, `preset` and caller-supplied `studies` or `compareSymbols`; the mini and seasonal widgets expose only the provider settings their own modules publish.

Client and provider lifecycle

Render these in a Client Component. The Web Components load their provider module only when the widget enters its lazy trigger; the iframe wrappers create the embed after hydration and remove it on unmount.

Limitations

The chart data, provider controls and attribution are TradingView's. A network failure is reported by the wrapper's bounded error surface; LUC does not cache, parse or recompute the market series.

Guidelines

Use the provider chart when its standard market views are the product and the data is not yours to compute.
Give every widget an explicit height; these surfaces measure and scroll differently from ordinary React content.

Don't

Do not use a provider chart when overlays or calculations must come from your own data; use `@luc/ui/charts` for that.
Do not assume TradingView's site settings are wrapper props; only the settings exposed by the typed widget cross the boundary.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

Exported symbols
Export	Kind	Signature
`TradingViewAdvancedChart`	32 documented props	`({ symbol, interval, timezone, style, preset, hideTopToolbar, hideSideToolbar, hideLegend, hideVolume, allowSymbolChange, saveImage, withDateRanges, details, hotlist, watchlist, compareSymbols, studi…`
`TradingViewMiniChart`	23 documented props	`({ symbol, timeFrame, lineChartType, showTimeRange, showTimeScale, hideMarketStatus, chartOnly, symbolUrl, theme, ...base }: TradingViewMiniChartProps) => import("@types/react").JSX.Element`
`TradingViewSeasonalChart`	21 documented props	`({ symbol, symbolUrl, theme, ...rest }: TradingViewSeasonalChartProps) => import("@types/react").JSX.Element`
`TradingViewSymbolOverview`	23 documented props	`({ symbols, chartType, showVolume, showMA, hideDateRanges, hideMarketStatus, hideSymbolLogo, noTimeScale, transparent, locale, config, theme, ...base }: TradingViewSymbolOverviewProps) => import("@ty…`

TradingViewAdvancedChart props

Type: TradingViewAdvancedChartProps

Values the compiler reads from the declaration.

TradingViewAdvancedChart props
Prop	Type	Default	Notes
`allowSymbolChange?`	`boolean \| undefined`	`—`
`aria-label?`	`string \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`compareSymbols?`	`readonly TradingViewCompareSymbol[] \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`details?`	`boolean \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideLegend?`	`boolean \| undefined`	`—`
`hideSideToolbar?`	`boolean \| undefined`	`—`
`hideTopToolbar?`	`boolean \| undefined`	`—`
`hideVolume?`	`boolean \| undefined`	`—`
`hotlist?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`interval?`	`TradingViewChartInterval \| undefined`	`—`
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`preset?`	`TradingViewChartPreset \| undefined`	`—`
`saveImage?`	`boolean \| undefined`	`—`
`studies?`	`readonly string[] \| undefined`	`—`
`style?`	`TradingViewChartStyle \| undefined`	`—`
`symbol`	`string`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`timezone?`	`string \| undefined`	`—`
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…
`watchlist?`	`readonly string[] \| undefined`	`—`
`withDateRanges?`	`boolean \| undefined`	`—`

TradingViewMiniChart props23 props

TradingViewMiniChart props

Type: TradingViewMiniChartProps

Values the compiler reads from the declaration.

TradingViewMiniChart props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`chartOnly?`	`boolean \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideMarketStatus?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`lineChartType?`	`"Area" \| "Line" \| "Baseline" \| undefined`	`—`
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`showTimeRange?`	`boolean \| undefined`	`—`
`showTimeScale?`	`boolean \| undefined`	`—`
`symbol`	`string`	`—`
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeFrame?`	`string \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…

TradingViewSeasonalChart props21 props

TradingViewSeasonalChart props

Type: TradingViewSeasonalChartProps

Values the compiler reads from the declaration.

TradingViewSeasonalChart props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideHeader?`	`boolean \| undefined`	`—`
`hidePriceScale?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`showAverage?`	`boolean \| undefined`	`—`
`showSeriesLabels?`	`boolean \| undefined`	`—`
`symbol`	`string`	`—`
`symbolUrl?`	`string \| undefined`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…

TradingViewSymbolOverview props23 props

TradingViewSymbolOverview props

Type: TradingViewSymbolOverviewProps

Values the compiler reads from the declaration.

TradingViewSymbolOverview props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`chartType?`	`"area" \| "line" \| "baseline" \| "candlesticks" \| "bars" \| "heikin-ashi" \| "hollow-candles"…`	`—`
`className?`	`string \| undefined`	`—`
`config?`	`TradingViewRawConfig \| undefined`	`—`	Advanced: extra provider configuration, merged under Luc UI's own keys. Cannot change the script URL, the element, or attribution.
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`hideDateRanges?`	`boolean \| undefined`	`—`
`hideMarketStatus?`	`boolean \| undefined`	`—`
`hideSymbolLogo?`	`boolean \| undefined`	`—`
`inheritTheme?`	`boolean \| undefined`	`—`	Map LUC semantic tokens onto TradingView's public CSS custom properties. Default `true`. Ignored by iframe widgets, which only accept the provider's own theme config — that limit …
`loading?`	`"lazy" \| "eager" \| undefined`	`—`	Defer loading until the widget is near the viewport. Default `"lazy"`.
`locale?`	`TradingViewLocale \| undefined`	`—`	Provider locale. Defaults to `LocaleProvider` when present, else `en`.
`minHeight?`	`string \| number \| undefined`	`—`	Minimum height, so a resizable pane cannot collapse the widget to nothing.
`noTimeScale?`	`boolean \| undefined`	`—`
`onStatusChange?`	`((change: TradingViewStatusChange) => void) \| undefined`	`—`	Notified on every lifecycle transition.
`placeholder?`	`ReactNode`	`—`	Rendered inside the widget box until the provider takes over. Defaults to a geometry-matched skeleton; an inline widget (Ticker Tag) supplies its own so it can sit inside a paragr…
`showMA?`	`boolean \| undefined`	`—`
`showVolume?`	`boolean \| undefined`	`—`
`symbols`	`readonly TradingViewSymbolOverviewEntry[]`	`—`
`theme?`	`TradingViewThemeProp \| undefined`	`—`
`timeoutMs?`	`number \| undefined`	`—`	Milliseconds to wait for a Web Component to register before reporting it as unavailable. Default `12000`. iframe widgets report failure from the script load instead.
`title?`	`string \| undefined`	`—`	Accessible name for the widget box. Defaults to the registry display name.
`transparent?`	`boolean \| undefined`	`—`	Ask the provider for a transparent background. Ignored by widgets that do not expose the option. LUC defaults to opaque: dense financial content is more readable on its own surfac…