HeatmapChart

OverviewProperties

Import

import { XYChart } from '@dynatrace/strato-components-preview/charts';

Use cases

A Heatmap is a type of chart that provides a two-dimensional representation of data in which various values are represented by colors. Heatmaps excel in detecting trends, recurring patterns, and deviations within intricate data sets.

To display a heatmap, add the XYChart.HeatmapSeries subcomponent within the XYChart component.

This series requires five essential properties that will function as data accessors:

• x0Accessor: indicates what data should be used as the start point for the x-axis baseline.
• x1Accessor: indicates what data should be used as the end point for the x-axis baseline. Not required for categorical-type axes.
• y0Accessor: indicates what data should be used as the start point for the y-axis baseline.
• y1Accessor: indicates what data should be used as the end point for the y-axis baseline. Not required for categorical-type axes.
• valueAccessor: indicates what data should be used as the tile value, which represents the intensity of the tile color.

These accessors will extract the specified data from the provided object array via the data property. It’s crucial to note that the accessors are used to construct each cell’s dimensions; incorrect specification of any accessor will result in an inability to generate the correct heatmap series.

Additionally, a XYChart.HeatmapSeries will need to be assigned to at least one x-axis and one y-axis via valid xAxisId and yAxisId properties. For a more detailed explanation of the axis configuration, please refer to the XYChart docs.

CodeSandbox

The XYChart.HeatmapSeries subcomponent includes some other optional properties: data, colorPalette, valueUnit, valueFormatter and actions.

The data and colorPalette properties can be used to overwrite the XYChart component for a specific series.

Data

The data provided to the HeatmapSeries component via the data property will be used in combination with the accessors of each series.

Coloring

The XYChart's colorPalette property supports predefined color palettes, custom color palettes, as well as custom color ranges. See coloring for more details.

CodeSandbox

Custom color palettes

The custom color palettes can be useful to apply to data of type string.

CodeSandbox

Custom color ranges

The custom color ranges can be useful to apply to data of type number.

CodeSandbox

Unit and formatter

You can apply a unit and formatter to the data extracted by the valueAccessor via valueUnit and valueFormatter as long as it is of type number. If the data is of type string then these properties will be disregarded.

CodeSandbox

CodeSandbox

Series actions

A series action is a creator-defined interaction with a given data point in the chart. Basic interactions include copying a series name and inspecting the underlying data of a data point. In order to enable chart interactions, the ChartSeriesAction subcomponent needs to be included within the XYChart.

More subcomponents can be added within this component, for instance ChartSeriesAction.Item, where you can provide a custom action that will appear in the tooltip menu. That action can execute any custom logic in its onSelect callback or get disabled via a disabled prop.

CodeSandbox

Download data as CSV

The XYChart component supports the download of data in CSV format via the downloadData function in the XYChartRef.

The CSV file for a heatmap series contains the following columns:

• series - the type and number of the series.
• x0 - the value corresponding to the data from the x0 accessor.
• x1 - the value corresponding to the data from the x1 accessor.
• y0 - the value corresponding to the data from the y0 accessor.
• y1 - the value corresponding to the data from the y1 accessor.
• value - the value corresponding to data from the valueAccessor.

CodeSandbox