HeatmapChart
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.
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.
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.
Custom color palettes
The custom color palettes can be useful to apply to data of type string.
Custom color ranges
The custom color ranges can be useful to apply to data of type number.
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.
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.
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.