Heat Map Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Data
  • Appearance
    • All Points
    • Individual Points
  • Color Scale
    • Ordinal
    • Linear
  • Labels and Tooltips
    • Tokens
    • Formatting Functions
    • Display Mode
  • Scrollers

Overview

A heat map is a visualization of a data matrix where values are represented as colors.

This article explains how to create a basic Heat Map chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Heat Map chart's characteristics:

Modules

The Heat Map chart requires adding the Core and Heat Map modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-heatmap.min.js"></script>

Learn more: Modules.

Quick Start

To create a Heat Map chart, use the anychart.heatMap() chart constructor, like in the following sample:

// create data
var data = [
  {x: "2010", y: "A", heat: 15},
  {x: "2011", y: "A", heat: 17},
  {x: "2012", y: "A", heat: 21},
  {x: "2010", y: "B", heat: 34},
  {x: "2011", y: "B", heat: 33},
  {x: "2012", y: "B", heat: 32},
  {x: "2010", y: "C", heat: 51},
  {x: "2011", y: "C", heat: 50},
  {x: "2012", y: "C", heat: 47}
];

// create a chart and set the data
chart = anychart.heatMap(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Heat Map chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Data

Data for a Heat Map chart can be passed to the chart constructor anychart.heatMap() or to the data() method.

Use the following data fields:

• x to set names of columns
• y to set names of rows
• heat to set values

By default, items are colored automatically according to their values (heats). However, you can set the color of each item manually by adding extra fields to your data, and in this case the heat field can be omitted. See the Appearance section to learn more.

Note: It is possible to add custom fields to your data - see the Labels and Tooltips section of this article.

This is how working with data fields of the Heat Map chart looks like:

// create data
var data = [
  {x: "2010", y: "A", heat: 15},
  {x: "2011", y: "A", heat: 17},
  {x: "2012", y: "A", heat: 21},
  {x: "2013", y: "A", heat: 23},
  {x: "2010", y: "B", heat: 34},
  {x: "2011", y: "B", heat: 33},
  {x: "2012", y: "B", heat: 32},
  {x: "2013", y: "B", heat: 30},
  {x: "2010", y: "C", heat: 43},
  {x: "2011", y: "C", heat: 42},
  {x: "2012", y: "C", heat: 40},
  {x: "2013", y: "C", heat: 38},
  {x: "2010", y: "D", heat: 8},
  {x: "2011", y: "D", heat: 8},
  {x: "2012", y: "D", heat: 7},
  {x: "2013", y: "D", heat: 8}
];

// create a chart and set the data
chart = anychart.heatMap(data);

Appearance

All Points

The appearance settings of a Heat Map chart can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

Also, you can use some other methods from anychart.core.StateSettings.

In the sample below, there is a Heat Map chart with appearance settings configured:

// configure the visual settings of the chart
chart.hovered().fill("gray", 0.4);
chart.selected().fill("gray", 0.6);
chart.selected().hatchFill("forward-diagonal", "gray", 2, 20);
chart.normal().stroke("gray");
chart.hovered().stroke("gray");
chart.selected().stroke("gray", 2);

Individual Points

It is possible to configure the appearance of each cell individually - use extra data fields corresponding to the methods mentioned above. In this case the heat field can be omitted:

// create data
var data = [
  {x: "1", y: "A", fill: "#ffcc00"},
  {x: "1", y: "B", fill: "#ffcc00"},
  {x: "1", y: "C", fill: "#ff9933"},
  {x: "1", y: "D", fill: "#ff9933"},
  {x: "2", y: "A", fill: "#ffcc00"},
  {x: "2", y: "B", fill: "#ff9933"},
  {x: "2", y: "C", fill: "#ff9933"},
  {x: "2", y: "D", fill: "#ff9933"},
  {x: "3", y: "A", fill: "#ff9933"},
  {x: "3", y: "B", fill: "#ff9933"},
  {x: "3", y: "C", fill: "#ff6600"},
  {x: "3", y: "D", fill: "#ff6600"},
  {x: "4", y: "A", fill: "#ff9933"},
  {x: "4", y: "B", fill: "#ff9933"},
  {x: "4", y: "C", fill: "#ff6600"},
  {x: "4", y: "D",
   normal:   {
       fill: "#ff0000",
       stroke: "4 #b30059"
     },
   hovered:  {
       fill: "#ff0000",
       stroke: "5 white"
     },
   selected: {
       fill: "#b30059",
       stroke: "5 white"
     }
  }
];

// create a chart and set the data
chart = anychart.heatMap(data);

Color Scale

By default, the color scale of a Heat Map chart is ordinal, and cells are colored in the colors of the default palette. Color ranges are set automatically.

Ordinal

To customize the ordinal color scale, you should create it explicitly by using the ordinalColor() constructor.

Combine it with ranges() to set heat ranges (two or more) you want to be marked by different colors. Then you can set a color for each of these ranges by using the colors() method. Please note that if you do not specify colors and ranges, the default settings of the ordinal color scale are used.

To set your scale as the color scale of the chart, use the colorScale() method.

This sample shows a Heat Map with an ordinal color scale:

// create and configure a color scale.
var customColorScale = anychart.scales.ordinalColor();
customColorScale.ranges([
  {less: 20},
  {from: 20, to: 40},
  {greater: 40}
]);
customColorScale.colors(["lightgray", "#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

Linear

To create a linear color scale, use the linearColor() constructor.

Then call colors() to set two colors, the first one indicating 0, and the second one indicating the maximum heat. Cells are colored automatically in different mixtures of these two colors, and if you do not specify them, the default colors of the linear color scale are used.

Finally, call colorScale() to set your scale as the color scale of the chart.

In the following sample, there is a Heat Map with a linear color scale:

// create and configure a color scale.
var customColorScale = anychart.scales.linearColor();
customColorScale.colors(["#00ccff", "#ffcc00"]);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

Labels and Tooltips

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

A Tooltip is a text box displayed when a point on a chart is hovered over. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

To change the text of labels, combine the labels() and format() methods with tokens.

To change the text of tooltips, do the same with the tooltip() and format() methods.

Besides tokens that work with all chart types, there is a token that is specific to the Heat Map - {%heat}. It returns the value (heat) of an element.

Also, you can always add a custom field to your data and use a custom token corresponding to it.

This sample shows how to work with tokens:

// create data
var data = [
  {x: "2010", y: "A", heat: 15, custom_field: "info 1"},
  {x: "2011", y: "A", heat: 17, custom_field: "info 2"},
  {x: "2012", y: "A", heat: 21, custom_field: "info 3"},
  {x: "2013", y: "A", heat: 23, custom_field: "info 4"},
  {x: "2010", y: "B", heat: 34, custom_field: "info 5"},
  {x: "2011", y: "B", heat: 33, custom_field: "info 6"},
  {x: "2012", y: "B", heat: 32, custom_field: "info 7"},
  {x: "2013", y: "B", heat: 30, custom_field: "info 8"},
  {x: "2010", y: "C", heat: 43, custom_field: "info 9"},
  {x: "2011", y: "C", heat: 42, custom_field: "info 10"},
  {x: "2012", y: "C", heat: 40, custom_field: "info 11"},
  {x: "2013", y: "C", heat: 38, custom_field: "info 12"},
  {x: "2010", y: "D", heat: 8, custom_field: "info 13"},
  {x: "2011", y: "D", heat: 8, custom_field: "info 14"},
  {x: "2012", y: "D", heat: 7, custom_field: "info 15"},
  {x: "2013", y: "D", heat: 8, custom_field: "info 16"}
];

// create a chart and set the data
var chart = anychart.heatMap(data);

// configure labels
chart.labels().format("{%heat}%");

// configure tooltips
chart.tooltip().format("{%y}: {%heat}%\n\n{%custom_field}");

Formatting Functions

To configure labels and tooltips, you can use formatting functions and the heat field (as well as the default ones).

You can also add a custom field to your data and refer to it by using the getData() method.

The sample below demonstrates how to work with formatting functions:

// create data
var data = [
  {x: "2010", y: "A", heat: 15, custom_field: "info 1"},
  {x: "2011", y: "A", heat: 17, custom_field: "info 2"},
  {x: "2012", y: "A", heat: 21, custom_field: "info 3"},
  {x: "2013", y: "A", heat: 23, custom_field: "info 4"},
  {x: "2010", y: "B", heat: 34, custom_field: "info 5"},
  {x: "2011", y: "B", heat: 33, custom_field: "info 6"},
  {x: "2012", y: "B", heat: 32, custom_field: "info 7"},
  {x: "2013", y: "B", heat: 30, custom_field: "info 8"},
  {x: "2010", y: "C", heat: 43, custom_field: "info 9"},
  {x: "2011", y: "C", heat: 42, custom_field: "info 10"},
  {x: "2012", y: "C", heat: 40, custom_field: "info 11"},
  {x: "2013", y: "C", heat: 38, custom_field: "info 12"},
  {x: "2010", y: "D", heat: 8, custom_field: "info 13"},
  {x: "2011", y: "D", heat: 8, custom_field: "info 14"},
  {x: "2012", y: "D", heat: 7, custom_field: "info 15"},
  {x: "2013", y: "D", heat: 8, custom_field: "info 16"}
];

// create a chart and set the data
var chart = anychart.heatMap(data);

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(function() {
  var heat = (this.heat);
  if (heat < 20)
    return "Low<br/>" + heat + "%";
  if (heat < 40)
    return "Medium<br/>" + heat + "%";
  if (heat >= 40)
    return "<span style='font-weight:bold'>High</span><br/>" +
           heat + "%";
});

// configure tooltips
chart.tooltip().format(function() {
  var heat = (this.heat);
  if (heat < 20)
    return this.y + ": Low (" + heat + "%)\n\n" +
                    this.getData("custom_field");
  if (heat < 40)
    return this.y + ": Medium (" + heat + "%)\n\n" +
                    this.getData("custom_field");
  if (heat >= 40)
    return this.y + ": High (" + heat + "%)\n\n" +
                    this.getData("custom_field");
});

Display Mode

By default, a label is not shown if it does not fit the width of a cell. However, you can hide such labels or always show all labels. To set the display mode of labels, call the labelsDisplayMode() method with one of the parameters listed in anychart.enums.LabelsDisplayMode:

• "drop" (default)
• "alwaysShow"
• "clip"

The following sample shows how these modes work:

// set the display mode of labels
chart.labelsDisplayMode("alwaysShow");

Scrollers

Sometimes, when working with large data sets, you might need your chart to be scrollable. The Heat Map chart supports both X- and Y-scrollers - to enable them, call the xScroller() and yScroller() methods.

You can as well set the area of a chart that is initially shown: use the xZoom() and yZoom() methods. For example, when they are combined with setToPointsCount(), a certain number of points is displayed. See the Scroller article to learn about other options.

The sample below shows how to configure scrollers on a Heat Map chart. Initially, 4 rows and 8 columns are shown:

// enable and configure scrollers
chart.xScroller().enabled(true);
chart.xZoom().setToPointsCount(8);
chart.yScroller().enabled(true);
chart.yZoom().setToPointsCount(4);