The react heatmap chart visualizes two-dimensional data graphically, where the individual values are represented in gradient or solid colors. The color variations in the heatmap cells or the data points are based on the magnitude of the data.
Though the react 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.
The react bubble heatmap chart, or the matrix bubble chart, visualizes the data using the variations in bubble attributes such as size, color, and sector. More details on bubble heatmap
The react calendar heatmap visualizes time series data, with each data point representing value bound to a specific time.
Populate data in the react heatmap chart using different axis types: numeric, category, and date-time.
Use a numeric axis to represent numeric data in a heatmap.
Use a date-time axis to represent time series data in a heatmap. Similarly, display dates and times as axis labels with different formats.
Use a category axis to represent non-numerical data in a heatmap and display text labels instead of numbers.
The react heatmap chart allows you to customize the axis elements to make an axis more readable.
Achieve RTL layout by reversing the axis labels. This swaps the higher and lower ranges of an axis.
Arrange the axes smartly by moving them to positions opposite of their default positions.
Set axis labels with regular intervals, hiding adjacent labels across all types of axes.
Rotate axis labels clockwise or counterclockwise to any desired angle.
Customize axis label text using the available formatting options.
Customize the default appearance of a cell or data point using the available formatting options.
Toggle visibility or format the data labels to display custom text along with the cell values.
Change the borders and cell spacing by customizing the border settings.
Customize the default color settings of the heatmap cells with gradient or solid custom colors.
Display additional information about data points in the react heatmap chart using a legend.
Choose between a gradient pointer and a list-type legend for improving data points’ readability.
Place the legend anywhere in the chart area to make it fit best on a page.
The control enables paging when legend items exceed the bounds. Then, each legend item can be viewed by navigating between the pages.
Handle missed or undefined data values with empty data points.
Display additional information for the data points with tooltips on hovering the mouse over them.