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

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The HTML5/JavaScript Heatmap Chart is a graphical representation of two-dimensional data where the values are represented with gradient or solid color variations. The data points are rendered as heatmap cells using Scalable Vector Graphics (SVG) or canvas UI rendering.


Dealing with large data

Though the JavaScript heatmap chart can render data points using both SVG and canvas modes, it uses canvas rendering mode while displaying large volumes of data for best initial load performance and optimized memory usage.


Bubble heatmap chart

The JavaScript bubble heatmap chart, or the matrix bubble chart, visualizes the data using the variations in bubble attributes such as size, color, and sector.

Bubble heatmap chart in JavaScript Heatmap


Calendar heatmap

The JavaScript calendar heatmap visualizes time series data, with each data point representing value bound to a specific time.


Axis

Populate data in the JavaScript heatmap chart using different axis types: numeric, category, and date-time.

Numeric axis

Use a numeric axis to represent numeric data in a heatmap.

Date-time axis

Use a date-time axis to represent time series data in a heatmap. Similarly, display dates and times as axis labels with different formats.

Category axis

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


Customizable axis

The JavaScript heatmap chart allows you to customize the axis elements to make an axis more readable.

JavaScript Heatmap with inversed origin or inversed axes

Inversed axis

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

JavaScript 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 JavaScript Heatmap

Axis intervals

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

Label rotation of the JavaScript Heatmap axes

Axis label rotation

Rotate axis labels clockwise or counterclockwise to any desired angle.

Axes label formatting in JavaScript Heatmap

Axis label formatting

Customize axis label text using the available formatting options.


Heatmap cell customization

Customize the default appearance of a cell or data point using the available formatting options.

Data labels in JavaScript Heatmap

Data label

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

JavaScript Heatmap cell with customized borders

Border

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


Palette

Customize the default color settings of the heatmap cells with gradient or solid custom colors.


Legend

Display additional information about data points in the JavaScript heatmap chart using a legend.

JavaScript Heatmap with a gradient legend and list-type legend

Types

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

Legend placement in JavaScript Heatmap

Positioning

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

Legend paging enabled in JavaScript Heatmap

Paging

The control enables paging when legend items exceed the bounds. Then, each legend item can be viewed by navigating between the pages.


Empty points

Handle missed or undefined data values with empty data points.

JavaScript Heatmap with empty data points


Tooltip

Display additional information for the data points with tooltips on hovering the mouse over them.

Cell tooltip enabled in JavaScript Heatmap


Other frameworks

The JavaScript Heatmap Chart control is also available in Angular, React, Vue and Blazor frameworks that are built from their own TypeScript libraries.


60+ JAVASCRIPT UI CONTROLS

Read independent,
authenticated reviews
on G2 Crowd

Download Now Pricing

What do our customers say about us?

Double quotes

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.
Daniel Persidok

Daniel Persidok

wpd onshore GmbH & Co. KG

Double quotes

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.
Carlos Rodriguez Garcia

Carlos Rodriguez Garcia

Vistatec

Transform your applications today by downloading our free evaluation version Download Free Trial

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Syncfusion Awards
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