Integrations · TradingView · Heatmaps

Where the colour is the data

Heatmaps are the one family LUC deliberately does not restyle: red and green mean performance, and repainting them with LUC accents would destroy the meaning. Only the surrounding chrome is themed.

Stock Heatmap

S&P 500 constituents sized by market cap and coloured by change.

StockHeatmap

iframe

S&P 500 constituents as a market-cap heatmap, coloured by change.

Provider docs

blockSize switches between market cap and volume; blockColor between daily change and period performance.

Crypto Coins Heatmap

Sized by market cap, coloured by change.

CryptoHeatmap

iframe

The crypto market as a heatmap, sized by market cap and coloured by change.

Provider docs

ETF Heatmap

US ETFs grouped by asset class.

EtfHeatmap

iframe

US ETFs grouped by asset class, sized by volume.

Provider docs

Forex Table

A Web Component — the one heatmap family that is not an iframe, so it inherits Luc UI's tokens.

ForexTable

Web Component

Cross rates.

Provider docs

ForexTable

Web Component

Daily change, heat-coloured.

Provider docs

Usage

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

<TradingViewStockHeatmap
  dataSource="SPX500"
  blockSize="market_cap_basic"
  blockColor="change"
  height={590}
/>

S&P constituents sized by market cap and coloured by the provider's change field.

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

<TradingViewCryptoHeatmap height={590} />

The crypto universe with provider size and performance semantics.

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

<TradingViewEtfHeatmap grouping="asset_class" height={540} />

US ETFs grouped by asset class.

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

<TradingViewForexTable displayedValue="dailyChange" heatmap height={400} />

The Web Component forex table, optionally using heat colours.

Configuration

`blockSize` selects what area means and `blockColor` selects the performance field. Those are provider semantics: do not relabel volume size as market cap, or daily change as a one-month return.

Client and provider lifecycle

The three market heatmaps are provider iframes; the forex table is a Web Component. Both need a bounded box, and the iframe variants create their provider document after hydration.

Limitations

Red and green carry market meaning and are intentionally not remapped to LUC accents. The TradingView provider owns the exchanges, universe, colour scale and performance calculations.

Guidelines

Use these when the provider's market-wide colour map is the information the reader needs.
State the universe, size field and performance window beside the widget.

Don't

Do not use a heatmap for precise ranking of close values; area and colour are not a table.
Do not restyle positive and negative colours to the product's brand palette.

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
`TradingViewCryptoHeatmap`	22 documented props	`({ dataSource, blockSize, blockColor, hasTopBar, isZoomEnabled, hasSymbolTooltip, transparent, symbolUrl, locale, theme, ...base }: TradingViewCryptoHeatmapProps) => import("@types/react").JSX.Element`
`TradingViewEtfHeatmap`	23 documented props	`({ dataSource, grouping, blockSize, blockColor, hasTopBar, isZoomEnabled, hasSymbolTooltip, transparent, symbolUrl, locale, theme, ...base }: TradingViewEtfHeatmapProps) => import("@types/react").JSX…`
`TradingViewForexTable`	19 documented props	`({ currencies, displayedValue, heatmap, symbolUrl, theme, ...base }: TradingViewForexTableProps) => import("@types/react").JSX.Element`
`TradingViewStockHeatmap`	24 documented props	`({ dataSource, grouping, blockSize, blockColor, exchanges, hasTopBar, isZoomEnabled, hasSymbolTooltip, transparent, symbolUrl, locale, theme, ...base }: TradingViewStockHeatmapProps) => import("@type…`

TradingViewStockHeatmap props

Type: TradingViewStockHeatmapProps

Values the compiler reads from the declaration.

TradingViewStockHeatmap props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`blockColor?`	`"change" \| "Perf.W" \| "Perf.1M" \| "Perf.3M" \| "Perf.6M" \| "Perf.YTD" \| "Perf.Y" \| undefin…`	`—`
`blockSize?`	`"market_cap_basic" \| "volume" \| 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.
`dataSource?`	`string \| undefined`	`—`
`exchanges?`	`readonly string[] \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`grouping?`	`"sector" \| "no_group" \| undefined`	`—`
`hasSymbolTooltip?`	`boolean \| undefined`	`—`
`hasTopBar?`	`boolean \| undefined`	`—`	Zoombar, tooltips and top bar, all provider features.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`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 …
`isZoomEnabled?`	`boolean \| 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…
`symbolUrl?`	`string \| undefined`	`—`	Redirect symbol clicks to your own site.
`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…

TradingViewCryptoHeatmap props22 props

TradingViewCryptoHeatmap props

Type: TradingViewCryptoHeatmapProps

Values the compiler reads from the declaration.

TradingViewCryptoHeatmap props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`blockColor?`	`"change" \| "Perf.W" \| "Perf.1M" \| "Perf.3M" \| "Perf.6M" \| "Perf.YTD" \| "Perf.Y" \| "24h_cl…`	`—`
`blockSize?`	`"volume" \| "market_cap_calc" \| "24h_vol_cmc" \| 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.
`dataSource?`	`string \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`hasSymbolTooltip?`	`boolean \| undefined`	`—`
`hasTopBar?`	`boolean \| undefined`	`—`	Zoombar, tooltips and top bar, all provider features.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`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 …
`isZoomEnabled?`	`boolean \| 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…
`symbolUrl?`	`string \| undefined`	`—`	Redirect symbol clicks to your own site.
`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…

TradingViewEtfHeatmap props23 props

TradingViewEtfHeatmap props

Type: TradingViewEtfHeatmapProps

Values the compiler reads from the declaration.

TradingViewEtfHeatmap props
Prop	Type	Default	Notes
`aria-label?`	`string \| undefined`	`—`
`blockColor?`	`"change" \| "Perf.W" \| "Perf.1M" \| "Perf.3M" \| "Perf.6M" \| "Perf.YTD" \| "Perf.Y" \| undefin…`	`—`
`blockSize?`	`"volume" \| "market_cap_calc" \| "AUM" \| 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.
`dataSource?`	`string \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`grouping?`	`"no_group" \| "asset_class" \| undefined`	`—`
`hasSymbolTooltip?`	`boolean \| undefined`	`—`
`hasTopBar?`	`boolean \| undefined`	`—`	Zoombar, tooltips and top bar, all provider features.
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`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 …
`isZoomEnabled?`	`boolean \| 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…
`symbolUrl?`	`string \| undefined`	`—`	Redirect symbol clicks to your own site.
`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…

TradingViewForexTable props19 props

TradingViewForexTable props

Type: TradingViewForexTableProps

Values the compiler reads from the declaration.

TradingViewForexTable 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.
`currencies?`	`readonly string[] \| undefined`	`—`	Currency codes shown in the matrix. The provider requires at least two.
`displayedValue?`	`"rate" \| "dailyChange" \| undefined`	`—`
`fallback?`	`ReactNode`	`—`	Rendered instead of the provider widget when the load fails.
`heatmap?`	`boolean \| undefined`	`—`
`height?`	`string \| number \| undefined`	`—`	Height of the widget box. Defaults to the registry's usable minimum.
`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…
`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…