> Markdown version of [Heat Map](https://vaadin.com/docs/next/components/charts/charttypes/heatmap). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.heatmap"></a>Heat Maps

A heat map is a two-dimensional grid, where the color of a grid cell reflects a value.

[Image: charts heatmap]

Heat Maps

Heat maps have chart type `HEATMAP`.

For example:

```java
Chart chart = new Chart(ChartType.HEATMAP);
chart.setWidth("600px");
chart.setHeight("300px");

Configuration conf = chart.getConfiguration();
conf.setTitle("Heat Data");

// Set colors for the extremes
conf.getColorAxis().setMinColor(SolidColor.AQUA);
conf.getColorAxis().setMaxColor(SolidColor.RED);

// Set up border and data labels
PlotOptionsHeatmap plotOptions = new PlotOptionsHeatmap();
plotOptions.setBorderColor(SolidColor.WHITE);
plotOptions.setBorderWidth(2);
plotOptions.setDataLabels(new DataLabels(true));
conf.setPlotOptions(plotOptions);

// Create some data
HeatSeries series = new HeatSeries();
series.addHeatPoint( 0, 0,  10.9); // Jan High
series.addHeatPoint( 0, 1, -51.5); // Jan Low
series.addHeatPoint( 1, 0,  11.8); // Feb High
...
series.addHeatPoint(11, 1, -47.0); // Dec Low
conf.addSeries(series);

// Set the category labels on the X axis
XAxis xaxis = new XAxis();
xaxis.setTitle("Month");
xaxis.setCategories("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");
conf.addxAxis(xaxis);

// Set the category labels on the Y axis
YAxis yaxis = new YAxis();
yaxis.setTitle("");
yaxis.setCategories("High C", "Low C");
conf.addyAxis(yaxis);
```

## <a id="charts.charttypes.heatmap.dataseries"></a>Heat Map Data Series

Heat maps require two-dimensional tabular data. The easiest way is to use `HeatSeries`, as was done in the earlier example. You can add data points with the `addHeatPoint()` method, or give all the data at once in an array with `setData()` or in the constructor.

If you need to use another data series type for a heat map, the semantics of the heat map data points are currently not supported by the general-purpose series types, such as `DataSeries`. You can work around this semantic limitation by specifying the `X` (column), `Y` (row), and `heatScore` by using the respective `X`, `low`, and `high` properties of the general-purpose data series.

While some other data series types allow updating the values one by one, updating all the values in a heat map is very inefficient; it’s faster to replace the data series and then call `chart.drawChart()`.

## <a id="heat-map-example"></a>Heat Map Example

**Flow** — `ChartTypeHeatMap.java`

```java
Chart chart = new Chart(ChartType.HEATMAP);

Configuration config = chart.getConfiguration();
config.getChart().setMarginTop(40);
config.getChart().setMarginBottom(40);

config.getTitle().setText("Sales per employee per weekday");

config.getxAxis().setCategories("Marta", "Mysia", "Misiek", "Maniek",
        "Miki", "Guillermo", "Jonatan", "Zdzisław", "Antoni",
        "Zygmunt");
config.getyAxis().setCategories("Monday", "Tuesday", "Wednesday",
        "Thursday", "Friday");

config.getColorAxis().setMin(0);
config.getColorAxis().setMinColor(SolidColor.WHITE);
SolidColor lightBlue = new SolidColor(22, 118, 243);
config.getColorAxis().setMaxColor(lightBlue);

config.getLegend().setLayout(LayoutDirection.VERTICAL);
config.getLegend().setAlign(HorizontalAlign.RIGHT);
config.getLegend().setMargin(0);
config.getLegend().setVerticalAlign(VerticalAlign.TOP);
config.getLegend().setY(25);
config.getLegend().setSymbolHeight(320);

HeatSeries rs = new HeatSeries("Sales per employee", getRawData());

PlotOptionsHeatmap plotOptionsHeatmap = new PlotOptionsHeatmap();
plotOptionsHeatmap.setDataLabels(new DataLabels());
plotOptionsHeatmap.getDataLabels().setEnabled(true);

SeriesTooltip tooltip = new SeriesTooltip();
tooltip.setHeaderFormat("{series.name}<br/>");
tooltip.setPointFormat("Amount: <b>{point.value}</b> ");
plotOptionsHeatmap.setTooltip(tooltip);
config.setPlotOptions(plotOptionsHeatmap);

config.setSeries(rs);
```