This page describes how to configure the heatmap widget. The general description of this widget can be found here: HeatMap Widget Documentation.
This widget supports the following datasources :
Configuration
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
General Tab
Except for the output configuration (see description below), the general configuration is common to all widgets. Please refer to the overall description on the Widget Configurations article.
Output Configuration
The output configuration allows to choose which point the heatmap will show (only one point can be selected).
Click the
button to display the point configuration:

Choose the point to display:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Select the type:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Select the aggregation interval to use on the heatmap:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
In case the expected interval would be missing, select Custom and enter it. Possible time units are:
y: Years (example value for one year: 1y)
M: Months (example value for one month: 1M)
w: Weeks (example value for one week: 1w)
d: Days (example value for one day: 1d)
h: Hours (example value for one hour: 1h)
m: Minutes (example value for one minute: 1m)
If necessary, choose the unit that will be displayed on the graph; by default, the unit of the point is used. Note: this does not convert from one unit to another; the displayed value remains unchanged.
Click on the
button.
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Advanced Tab
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
The Advanced tab allows you to customize the heatmap display. This includes defining the colors to use, improving the map's readability by highlighting abnormal values.
The tab is divided into 3 sections:
Common
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Include site name in legends: If checked, each asset name appearing in the heatmap legend will be prefixed with its site name. Example (the site name is put before each inverter name - blurred for privacy reasons):
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Hide borders: If checked, heatmap elements will not be surrounded by a border. Example with borders (by default):
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Example without borders:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Custom No-data Color: Using a color picker, sets the color to represent periods without data. For dark and light modes respectively, click the colored square, then select the color to use:
It is also possible to copy the color code for later reuse, and to reset to the default color.
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Maximum number of chart series: Reduces the number of items displayed simultaneously on the heatmap (for readability and performance matters). If more items are requested, the heatmap will be displayed across multiple pages. Example with 31 inverters selected, with a Maximum number of chart series set to 15:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Min
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Min value: If this field is left empty, the minimum value (both on the right legend and on the heatmap) is determined from the actual data. Otherwise, the minimum considered value is the one entered. This can help eliminate outliers. Note: Any measurement below the defined Min value will be considered “no data” on the heatmap.
Min legend text: Replaces the minimum value on the legend with the entered text.
Min Color: Using a color picker, sets the color to represent the minimum value. For dark and light modes respectively, click the colored square, then select the color to use.
Max
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Max value: If this field is left empty, the maximum value (both on the right legend and on the heatmap) is determined from the actual data. Otherwise, the maximum considered value is the one entered. Note: Any measurement exceeding the defined Max value will be considered “no data” on the heatmap.
Max legend text: Replaces the maximum value on the legend with the entered text.
Max Color: Using a color picker, sets the color to represent the minimum value. For dark and light modes respectively, click the colored square, then select the color to use.
Point Color filter section
If no color filter is set, the heatmap uses a linear gradiant calculated between the min and max colors to represent each value of the selected point.
It is possible to define a color filter to modify this behavior, by associating a color with each desired range of values, whether for the displayed point or based on the values of another point. For example, for a solar power plant it is possible to have a conditional representation of ActivePower on the heatmap, depending on another parameter such as irradiation: this makes it possible not to highlight as under-production measurements during a period of low sunshine.
Click on the
button:.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Select the point to consider:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Select the type of data:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
The interval and the unit are then automatically set:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
The interval cannot be modified.
By default, the unit is that of the selected point. However, it is possible to enter a different unit by clicking on the
button.Note: This unit is only used for the hover tooltip. No conversion is performed from one unit to another; the displayed value remains unchanged.
Repeat the following steps to enter as many ranges as necessary.
Click the
button, and define a value range, a label to categorize it and a color:.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Click the
button to save, or
to cancel.
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
At any time once a value range is defined, click the
button to edit it, or
to remove it.
Example of a heat map with above color filter applied:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
At any time once a color filter is defined, it is possible to edit or remove it, using respectively the
or
button:.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Note: There is no check for the intervals used, so it is possible to define overlapping value ranges on the color filter. In this case:
When hovering over a value on the heatmap, each relevant interval is listed:
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Coloring is performed according to the order defined by the position of each interval: changing the position of an interval (by moving it using the
button on the left of value ranges) sets a priority and can radically change the displayed graph.Example 1: positioning an overlapping range in the last position will give it priority (because it will be evaluated last):
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
Example 2: positioning this range in the first position will give the lowest priority (because it will be evaluated first):
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)
.png?sv=2022-11-02&spr=https&st=2025-12-21T03%3A37%3A55Z&se=2025-12-21T03%3A51%3A55Z&sr=c&sp=r&sig=SIGlsvbJbnW03RNdrMLSowftDC9OgZU2vXyBnRYXLhQ%3D)