A heatmap is a graphical representation of data where a metric is represented at the intersection of 2 attribute values. VitaraCharts’ custom table heatmap allows you to place multiple attributes on the columns (axis and y-axis) and at a glance display the variations in the measures. A sample table heatmap is presented below.


Metrics: The minimum 1 metric is required.

Attributes: A minimum of 2 attributes are required. The first attribute A1 is used for the x-axis and the second attribute A2 is used for the Y axis.

Use as Filter Option - Available

Thresholds Option - Available

heatmap inputs


From the 4.5 version of Vitara charts, the cell border properties are added to the heatmap chart. Border width, Border radius and Border color are the three options added in the cell border properties.

heatmap inputs

Below is the example where the applied border properties are shown Border width - 3 Border radius - 15 Border color - Sky blue

heatmap inputs


In the business point of view, certain part of the chart needs to be highlighted to draw more attention from the desicion makers. For example, highlight the stores where total sales is greater than a specific value or highlight the top 10 products whose sales is high during last year’s winter. Thresholds are very useful objects in these use cases.

Thresholds will display some conditional formatting in a chart to highlight certain data points depending on predefined criteria.The criteria are attribute or metric qualifications. If a qualification’s expression evaluates to TRUE, the report displays the threshold. We can also include markers in thresholds.

To apply thresholds in vitara charts, hover the cursor on the chart. Vitara chart will display an ‘Edit’ button. When you click on this ‘Edit’ button the properties window will pop out. Select the thresholds tab to open threshold editor. In the window you can add a new threshold or delete any existing threshold or modify the existing threshold.

Note: From 4.6 version we can apply thresholds using attributes. The source drop down box in the threshold editor window will list all the attributes and metrics in the chart. we can select an attribute as source and define a threshold condition.

By default Heatmap creates a threshold (Gradient threshold) and plot colors based on this threshold. Below is the screenshot of threshold editor of heatmap. Threshold editor shows the default threshold applied on the chart. We can edit this threshold or delete this threshold and create a new one by clicking on ‘Add’ button.

heatmap add threshold

heatmap threshold condition

Total Labels

From 4.9.2 version onwards of Vitara charts, by default heatmap chart displays vertical and horizontal totals .The option for this property is available in the data labels menu. We can enable/disable ‘Total Labels’ independently from the option ‘All’ in the data labels menu to the heatmap chart.

heatmap total labels

heatmap total labels

Background Image

The steps to set a background image for all Vitara charts are explained in backgroundImage.