Heatmap Chart overview
<tng-heatmap-chart> Field-driven heatmap wrapper for matrix intensity views.
Simple sample
Compare the Heatmap Chart preset in its default plain-CSS presentation and in a theme-aware Tailwind shell.
Simple sample (Plain-CSS)
Simple sample (Tailwind CSS)
Chart metadata
| Category | Heatmap |
|---|---|
| Series type | heatmap |
| Coordinate system | cartesian2d |
| Features | standard preset |
Imports
Chart imports
ts
import { TngHeatmapChart, type TngChartData } from '@tailng-ui/charts';
const data: TngChartData = [
{"label":"Jan","value":42},
{"label":"Feb","value":58},
{"label":"Mar","value":64},
{"label":"Apr","value":86},
];Minimal usage
Standalone component
ts
@Component({
imports: [TngHeatmapChart],
template: `<tng-heatmap-chart [data]="data" xField="label" yField="value" valueField="value" [height]="320" />`,
})
export class HeatmapChartExample {
protected readonly data = data;
}