You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<pclass="description">Heatmap charts visually represents data with color variations to highlight patterns and trends across two dimensions.</p>
9
+
<pclass="description">Use heatmap charts to show intensity as a grid of colored cells across two dimensions.</p>
10
10
11
11
## Overview
12
12
13
-
Heatmaps are ideal for visualizing intensity variations across two categorical or continuous dimensions. They highlight areas of high and low concentration in a dataset, making it easy to detect trends, clusters, or anomalies at a glance. Each cell in a heatmap represents the intersection of two variables, with color encoding used to convey the magnitude of a numerical value.
13
+
A heatmap shows how a numeric value varies across two dimensions as a grid of colored cells.
14
+
Each cell is the intersection of an x and y category or tick, and color encodes the value.
15
+
16
+
Use heatmaps to spot areas of higher or lower intensity, clusters, or anomalies.
17
+
18
+
The demo below shows bicycle counts in Paris by day and hour.
Heatmap charts series must contain a `data` property containing an array of 3-tuples.
19
-
The first two numbers in each tuple correspond to the x and y indexes of the cell, respectively.
20
-
The third number is the value for the given cell.
24
+
A heatmap series must include a `data` property with an array of 3-tuples.
25
+
Each tuple is `[xIndex, yIndex, value]`.
26
+
The first two numbers are the cell's x and y indices, and the third is the cell value.
21
27
22
28
```jsx
23
29
<Heatmap
@@ -32,92 +38,94 @@ The third number is the value for the given cell.
32
38
/>
33
39
```
34
40
35
-
You can specify x and y ticks with the `xAxis` and `yAxis` props.
41
+
Use the `xAxis` and `yAxis` props to set x and y ticks.
36
42
37
43
{{"demo": "BasicHeatmap.js"}}
38
44
39
45
## Color mapping
40
46
41
-
To customize the color mapping, use the `zAxis` configuration.
42
-
You can either use the piecewise or continuous [color mapping](https://mui.com/x/react-charts/styling/#value-based-colors).
47
+
Use the `zAxis` configuration to customize how values map to color.
48
+
You can use piecewise or continuous scales.
49
+
See [Styling—Value-based colors](/x/react-charts/styling/#value-based-colors) for details.
43
50
44
51
{{"demo": "ColorConfig.js"}}
45
52
46
53
## Highlight
47
54
48
-
You can choose to highlight the hovered element by setting `highlightScope.highlight` to `'item'`.
49
-
To fade the other item, set `highlightScope.fade` to `'global'`.
55
+
Set `highlightScope.highlight` to `'item'` to highlight the hovered cell.
56
+
Set `highlightScope.fade` to `'global'` to fade the other cells.
50
57
51
58
{{"demo": "HighlightHeatmap.js"}}
52
59
53
-
By default highlighted/faded effect is obtained by applying the CSS property `filter: saturate(...)`to cells.
54
-
To modify this styling, use the `heatmapClasses.highlighted` and `heatmapClasses.faded`CSS classes to override the applied style.
60
+
By default, the highlight and fade use the CSS `filter: saturate(...)`property.
61
+
You can override the effect with the `heatmapClasses.highlighted` and `heatmapClasses.faded` classes.
55
62
56
-
In the following demo, we replace the highlight saturation by a border radius and reduce the saturation of the faded cells.
63
+
The demo below uses border radius on the highlighted cell and reduced saturation for faded cells.
57
64
58
65
{{"demo": "HighlightClasses.js"}}
59
66
60
-
## Click event
67
+
## Click events
61
68
62
-
Use `onItemClick` to know which cell is clicked by user.
69
+
Use `onItemClick` to handle cell clicks.
63
70
64
-
The first argument is the click event.
65
-
The second one is the item identifier.
66
-
It contains the properties `xIndex` and `yIndex` that are the indexes of the clicked cell along the x- and y-axes respectively.
67
-
68
-
If this cell has associated data, the `dataIndex` property indicates the position of the cell's data within the series' `data` array.
71
+
The handler receives the click event as the first argument and an item object as the second.
72
+
The item includes `xIndex` and `yIndex` (cell position on the x- and y-axes) and, when the cell has data, `dataIndex` (index in the series `data` array).
69
73
70
74
{{"demo": "HeatmapCellClick.js"}}
71
75
72
-
## Common features
76
+
## Shared features
73
77
74
-
The heatmap shares several features with other charts.
75
-
This section only explains the details that are specific to the heatmap.
76
-
If you'd like to learn more about the shared features, you can visit their dedicated pages.
78
+
Heatmap charts use the same axis, tooltip, and legend patterns as other charts.
79
+
This section notes heatmap-specific details.
80
+
See the linked pages for full options.
77
81
78
82
### Axes
79
83
80
-
The Heatmap axes can be customized like any other chart axis.
81
-
The available options are available in the [axis customization page](/x/react-charts/axis/#axis-customization).
84
+
You can configure heatmap axes like other chart axes.
85
+
See [Axis—Customization](/x/react-charts/axis/#axis-customization) for details.
82
86
83
87
### Tooltip
84
88
85
-
The Heatmap has an item tooltip that can be customized as described in the [Tooltip documentation page](/x/react-charts/tooltip/).
89
+
The default heatmap tooltip is item-based.
90
+
You can customize it with slots.
91
+
See [Tooltip](/x/react-charts/tooltip/) for details.
86
92
87
-
The only difference of the Heatmap Tooltip is its default content.
88
-
You can import the default tooltip, or only its content as follows:
93
+
The heatmap package exports the default tooltip and its content if you want to reuse or extend them:
0 commit comments