Heatmap
DataCell-grid heatmap with color ramp legend — usage, density, and correlation matrices.
HeatmapData · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Heatmap from @otfdashkit/ui.
Code
// Heatmap — Cell-grid heatmap with color ramp legend — usage, density, and correlation matrices.
//
// Install:
// bun add @otfdashkit/ui
import { Heatmap } from '@otfdashkit/ui'
export function Example() {
return (
<Heatmap>
{/* your content */}
</Heatmap>
)
}Props
Props declared in the Heatmap source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | HeatmapDay[] | ||
| cellSize | number | 11 | |
| className | string | ||
| colorScale | string[] | ||
| endDate | Date | ||
| formatTooltip | (day: HeatmapDay) => string | ||
| gap | number | 3 | |
| showDayLabels | boolean | true | |
| showLegend | boolean | true | |
| showMonthLabels | boolean | true | |
| weeks | number | 53 |