KendoReact

React Heatmap Chart

  • Empower your users to make better decisions with this customizable Heatmap chart, which visualizes the magnitude of a value over two dimensions.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Crosshairs

    For busy or large heatmaps, it can be difficult to see a specific X and Y value for individual data points. Thanks to the built-in Crosshairs feature of the React Heatmap chart component, lines going across the X and Y axis follow the mouse pointer and display the current X and Y values along the way. Enabling this functionality is as simple as setting a single property. 

    See the React Heatmap Crosshairs demo

    React Heatmap Chart Component Crosshairs
  • Overview

    The React Heatmap (also known as Cluster Heatmap), part of the KendoReact Charts library, visualizes data in a two-dimensional matrix where the relative value of data points is represented by different colors. Out-of-the-box, you get built-in color scales, a variety of marker shapes, panning and zooming, tooltips, crosshairs and more. Like any other data-consuming KendoReact component, the React Heatmap can be bound to any data source. 

    See the React Heatmap demo 

    React Heatmap Chart Component
  • Data Binding

    You can bind the KendoReact Heatmap series to arrays and objects. A common scenario is to bind it to datasets representing an X and Y axis and values. In order to bind data to the Heatmap from any source, you just have to keep track of three properties related to the values of your data points, making the component extremely flexible. 

    See the React Heatmap Data Binding demo 

  • Color Scales

    The built-in color scale of the Heatmap highlights the largest value using the main series color and indicates lower values with sequential lighter shades. Of course, you can define a custom color scheme, including working with libraries like d3-scale-chromatic. 

    See the React Heatmap Color Scales demo 

    React Heatmap Chart Component Color Scales
  • Marker Shapes

    Depending on your dataset and design requirements, you may prefer differently shaped heatmap markers (data points). With the KendoReact Heatmap, you can choose between four marker shapes: rectangle, triangle, circle and rounded rectangle with configurable border radius. Typically, the distance between the markers is fixed and the size of each marker is determined by the available space.  However, you can also use a fixed marker size and let the distance vary instead. 

    See the React Heatmap Marker Shapes demo 

    React Heatmap Chart Component Marker Shapes
  • Panning & Zooming

    With large datasets, it may be preferable to display only part of the data within one cluster heatmap. By enabling panning and zooming, this becomes a viable UX option. Panning allows users to scroll horizontally over an axis, moving left and right and navigating through large sets of data with ease. Zooming can move in and out of an area of a chart with the scroll wheel of a mouse or through selecting an area on the KendoReact Heatmap. 

    See the React Heatmap Panning & Zooming demo 

  • Tooltips

    With its built-in support for tooltips, the React Heatmap can be configured to display information when the user hovers over individual chart points. By default, these tooltips can be bound to a field from the underlying data model but they can also be customized to contain a completely unique layout through a custom renderer for the tooltip element. 

    See the React Heatmap Tooltips demo 

    React Heatmap Chart Component Tooltips

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.