We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


A heat map is a graphical representation of data in which the values are represented with gradient or solid color variations. The data points are rendered as heat map cells using Scalable Vector Graphics (SVG) or canvas rendering logics.


Populate data in a heat map using different axis types: numeric, category, and date-time.

Numeric axis

Use a numeric axis to represent numeric data in a heat map.

Date-time axis

Use a date-time axis to represent dates in a heat map and display dates as axis labels with different formats.

Category axis

Use a category axis to represent non-numerical data in a heat map and display text labels instead of numbers.

Customizable axis

Heat map axis elements can be customized further to make the axis more readable.

Heatmap with inversed origin or inversed axes

Inversed axis

Achieve RTL layout in a heat map by reversing the axis labels. This swaps the higher and lower ranges of an axis.

Heatmap with axes displayed in opposed position

Opposed positions

Arrange the axes smartly by moving them to positions opposite of their default positions.

Axis intervals displayed in Heatmap

Axis intervals

Set axis labels with regular intervals, hiding adjacent labels across all types of axes.

Label rotation of the Heatmap axes

Axis label rotation

Rotate axis labels clockwise or counterclockwise to any desired angle.

Axes label formatting in Heatmap

Axis label formatting

Customize axis label texts using custom formatting options.

Cell customization

Customize the default cell settings using formatting options.

Data labels in Heatmap

Data labels

Toggle visibility or format the data labels to display custom text along with the values.

Heatmap cell with customized borders


Change the borders and cell spacing by customizing the border settings.


Customize the default palette settings of the heat map cells with gradient and solid custom colors.


Display additional information about data points in a heat map with the help of a legend.

Heatmap with a gradient legend and a list-type legend


Choose between a gradient pointer legend and a list-type legend for improving data points’ readability.

Legend placement in Heatmap


Place the legend anywhere in the heat map area to make it fit best on a page.

Legend paging enabled in Heatmap


Paging is enabled when legend items exceed the bounds. Each legend item can be viewed by navigating between the pages.

Empty points

Missed data in the data set can be handled with empty points.

Heatmap with empty data points


A tooltip adds an interactive pop-up to a data point on mouse hover.

Cell tooltip enabled in Heatmap


Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon