Heat Map
SVG-based heatmap. Small mode shows 7 days × 24 hours of activity. Large mode shows 52 weeks × 7 days.
Data Source Controls
Heat Map
TypeScript
// 1. Setup Data Provider
const clientProvider = new CFlatClientDataProvider()
clientProvider.setData([
{ row: 'Mon', column: '09:00', value: 45 },
{ row: 'Tue', column: '09:00', value: 65 }
])
// 2. Component Usage
KHeatMap(
:data-provider="clientProvider"
row-field="row"
column-field="column"
value-field="value"
color-low="#1e1e2e"
color-high="#6366f1"
@click-point="onPointClick"
)
Attributes
Configure the KHeatMap component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| dataProvider | ADataProvider | - | Required. Provides chart dataset |
| rowField | string | 'row' | Data property for the row (Y-axis) variable |
| columnField | string | 'column' | Data property for the column (X-axis) variable |
| valueField | string | 'value' | Data property for the numerical value dictating color |
| colorLow | string | '#1e1e2e' | Color gradient start (low values) |
| colorHigh | string | '#6366f1' | Color gradient end (high values) |
| colors | string[] | (palette) | Array of fallback colors |
| backgroundColor | string | '#ffffff' | Chart canvas background color |
| showLegend | boolean | true | Shows the color scale legend |
| xAxisTitle | string | '' | Title label for X axis |
| yAxisTitle | string | '' | Title label for Y axis |
Events
| Name | Payload | Description |
|---|---|---|
| click-point | (item: any, index: number) | Triggered when a cell is clicked |
| hover-point | (item: any, index: number) | Triggered when hovering over a cell |
Slots
| Name | Props | Description |
|---|---|---|
| tooltip | { item, index } | Custom template for the data point tooltip |