Search results

Appearance in React HeatMap component

22 Oct 2021 / 9 minutes to read

Cell/customizations

You can customize the cell by using the cellSettings property.

Border

Change the width, color, and radius of the heat map cells by using the border property.

Source
Preview
App.tsx
Copied to clipboard

Cell highlighting

Enable or disable the cell highlighting while hover over the heat map cells by using the enableCellHighlighting property.

Note: The cell highlighting only works in a SVG rendering mode.

Source
Preview
App.tsx
Copied to clipboard

Margin

Set the margin for the heat map from its container by using the margin property.

Source
Preview

Title

The title is used to provide a quick information about the data plotted in heat map. The text property is used to set the title for heat map. You can also customize text style of a title by using the textStyle property.

Source
Preview
App.tsx
Copied to clipboard

Data label

You can toggle the visibility of data labels by using the showLabel property. By default, the data label will be visible.

Source
Preview
App.tsx
Copied to clipboard

Text style

You can customize the font family, font size, and color of the data label by using the textStyle in the cellSettings property.

Source
Preview

Format

You can change the format of the data label, such as currency, decimal, percent etc. by using format property.

Source
Preview

Customize the cell value

In the HeatMap, you can customize the cell value using the cellRender client-side event.

Source
Preview

See Also