Heat map
Values across a two-dimensional categorical matrix with a sequential color scale.
- Purpose
- Compare magnitude at the intersections of two ordered categorical axes.
- Use when
- Use to reveal concentration, gaps, and broad patterns across a complete matrix.
- Avoid when
- Avoid when exact cell-by-cell comparison is primary or the matrix is too large to scan.
- Equivalent data
- A bounded exact-value table preserves both axis labels and numeric values, so the color scale never carries meaning by itself.
Exact values
| Y | X | Value |
|---|---|---|
| 0 | 0 | 4.4 |
| 0 | 1 | 4.9 |
| 0 | 2 | 7 |
| 0 | 3 | 7.5 |
| 0 | 4 | 4.3 |
| 1 | 0 | 2.6 |
| 1 | 1 | 5.9 |
| 1 | 2 | 9 |
| 1 | 3 | 6.4 |
| 1 | 4 | 2.3 |
| 2 | 0 | 3.3 |
| 2 | 1 | 6.4 |
| 2 | 2 | 7 |
| 2 | 3 | 4.9 |
| 2 | 4 | 3.2 |
| 3 | 0 | 1.9 |
| 3 | 1 | 6 |
| 3 | 2 | 9 |
| 3 | 3 | 5.9 |
| 3 | 4 | 2.6 |
| 4 | 0 | 4.4 |
| 4 | 1 | 5.9 |
| 4 | 2 | 7 |
| 4 | 3 | 6.4 |
| 4 | 4 | 4.6 |
@heatmap.HeatMap(heatmap.Config{
Label: "Basic heat map",
Title: "Heat Map Chart",
XAxis: heatmap.Axis{Title: "X-Axis", Labels: []string{"0", "1", "2", "3", "4"}},
YAxis: heatmap.Axis{Title: "Y-Axis", Labels: []string{"0", "1", "2", "3", "4"}},
Rows: [][]float64{
{4.4, 4.9, 7.0, 7.5, 4.3},
{2.6, 5.9, 9.0, 6.4, 2.3},
{3.3, 6.4, 7.0, 4.9, 3.2},
{1.9, 6.0, 9.0, 5.9, 2.6},
{4.4, 5.9, 7.0, 6.4, 4.6},
},
ValueRange: heatmap.ValueRange{Min: 1.9, Max: 9},
Width: 600,
Height: 400,
})Typed presentation options
This caller-style override deliberately reuses the same pinned upstream matrix. It demonstrates finite title, axis, spacing, value-label, and cold-to-warm scale options; it is not counted as a second upstream example.
Exact values
| Y | X | Value |
|---|---|---|
| 0 | 0 | 4.4 |
| 0 | 1 | 4.9 |
| 0 | 2 | 7 |
| 0 | 3 | 7.5 |
| 0 | 4 | 4.3 |
| 1 | 0 | 2.6 |
| 1 | 1 | 5.9 |
| 1 | 2 | 9 |
| 1 | 3 | 6.4 |
| 1 | 4 | 2.3 |
| 2 | 0 | 3.3 |
| 2 | 1 | 6.4 |
| 2 | 2 | 7 |
| 2 | 3 | 4.9 |
| 2 | 4 | 3.2 |
| 3 | 0 | 1.9 |
| 3 | 1 | 6 |
| 3 | 2 | 9 |
| 3 | 3 | 5.9 |
| 3 | 4 | 2.6 |
| 4 | 0 | 4.4 |
| 4 | 1 | 5.9 |
| 4 | 2 | 7 |
| 4 | 3 | 6.4 |
| 4 | 4 | 4.6 |
cfg := sampleBasicHeatMap()
cfg.TitleOptions = heatmap.TitleOptions{
Subtext: "Same source data, caller presentation",
FontSize: 16,
SubtextFontSize: 10,
}
cfg.XAxis.TitleFontSize, cfg.XAxis.LabelFontSize, cfg.XAxis.LabelCount = 11, 9, 5
cfg.YAxis.TitleFontSize, cfg.YAxis.LabelFontSize, cfg.YAxis.LabelCount = 11, 9, 5
cfg.Padding = heatmap.Padding{Top: 20, Right: 24, Bottom: 24, Left: 28}
cfg.ValueLabels = heatmap.ValueLabelOptions{
Show: true,
Format: heatmap.ValueFormatExact,
Decimals: 1,
TrailingZeros: true,
FontSize: 10,
}
cfg.Gradient = heatmap.Gradient{
Stops: []heatmap.GradientStop{
{At: 0, Color: "#0e7490", Class: "scale-cold"},
{At: 0.5, Color: "#fbbf24", Class: "scale-middle"},
{At: 1, Color: "#e11d48", Class: "scale-warm"},
},
}
@heatmap.HeatMap(cfg)Static/vector behavior
Heat map renders one inline 600 by 400 SVG from the pinned five-by-five matrix, follows Goshtoso chart tokens in light and dark mode, remains useful in print or without JavaScript, and exports resolved SVG plus opaque PNG through the shared wrapper. Read across and down for patterns, then use the adjacent values for exact cells; shared chart controls and chart modes guides document lifecycle and delivery choices.
Go API
v0.0.1The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.
github.com/araihu/goshtoso-charts/components/heatmapEnabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.