Examples
Heatmap Chart examples in the default plain-CSS presentation and in a theme-aware Tailwind shell. TailNG generates the ECharts option, legend, and chart variables for you.
Dashboard usage
Drop the Heatmap Chart preset into an analytics card without changing the field-driven API.
Heatmap Chart dashboard usage
Default preset
Stock Heatmap Chart behavior with the generated option defaults.
Default preset (Plain-CSS)
The default preset picks up the chart theme contract without extra utility classes on the host.
Default preset (Tailwind CSS)
Tailwind can own the outer analytics surface while semantic tokens keep light, dark, and custom themes in sync.
Scoped theme variables
Override chart CSS variables on the host element to align the preset with your product palette.
Scoped theme (Plain-CSS)
Scoped variables on tng-heatmap-chart flow into series, axis, and grid colors.
Scoped theme (Tailwind CSS)
Heatmap Chart preview
Combine utility shells with inherited chart variables when the chart sits inside a Tailwind-composed dashboard.
Option override
Use optionOverride when the generated preset needs ECharts-specific styling adjustments.
Option override (Plain-CSS)
The hook receives the generated option and returns the final ECharts configuration.
Option override (Tailwind CSS)
Option overrides compose with Tailwind shells—the chart host still owns rendering and theme resolution.