Heat Map Chart


AnyChart JavaScript Heat map is a graphical representation of data where the individual values contained in a matrix are represented as colors. This article will tell you how to work with Heat map charts in AnyChart JavaScript Charting Library.


Each data point for a heat map chart must have three parameters: "x" parameter should define the name of the column to put the point into, "y" parameter defines the row to put the point into and "heat" parameter is the point's value ("heat" parameter can be omitted when you are using direct coloring). Later the heat map points will be colored due to the colorScale ranges, which are based on these values. Here is a sample of appropriate data formatting:

  var dataSet = anychart.data.set([
    {x: "Quarter 1", y: "Mobile", heat: 15},
    {x: "Quarter 2", y: "Mobile", heat: 17},
    {x: "Quarter 3", y: "Mobile", heat: 21},
    {x: "Quarter 4", y: "Mobile", heat: 23},
    {x: "Quarter 1", y: "WebMail", heat: 34},
    {x: "Quarter 2", y: "WebMail", heat: 33},
    {x: "Quarter 3", y: "WebMail", heat: 32},
    {x: "Quarter 4", y: "WebMail", heat: 30},
    {x: "Quarter 1", y: "Desktop", heat: 43},
    {x: "Quarter 2", y: "Desktop", heat: 42},
    {x: "Quarter 3", y: "Desktop", heat: 40},
    {x: "Quarter 4", y: "Desktop", heat: 38},
    {x: "Quarter 1", y: "Undetected", heat: 8},
    {x: "Quarter 2", y: "Undetected", heat: 8},
    {x: "Quarter 3", y: "Undetected", heat: 7},
    {x: "Quarter 4", y: "Undetected", heat: 8}
  var chart = anychart.heatMap(dateSet);

Moreover, you can use an array of arrays without any parameters as a data source - in this case you'll need to map your data later:

  var data = [
    ["Quarter 1", "Mobile", 15],
    ["Quarter 2", "Mobile", 17],
    ["Quarter 3", "Mobile", 21],
    ["Quarter 4", "Mobile", 23],
    ["Quarter 1", "WebMail", 34],
    ["Quarter 2", "WebMail", 33],
    ["Quarter 3", "WebMail", 32],
    ["Quarter 4", "WebMail", 30],
    ["Quarter 1", "Desktop", 43],
    ["Quarter 2", "Desktop", 42],
    ["Quarter 3", "Desktop", 40],
    ["Quarter 4", "Desktop", 38],
    ["Quarter 1", "Undetected", 8],
    ["Quarter 2", "Undetected", 8],
    ["Quarter 3", "Undetected", 7],
    ["Quarter 4", "Undetected", 8],
  // define the column for each parameter
  var dataSet = data.mapAs({
    x: [0],
    y: [1],
    heat: [2]
  var chart = anychart.heatMap(dataSet);

As you can see, the data set is used as a parameter for the .heatMap() method.

Here is a heat map with the data from above:

JsFiddle Playground


While the majority of chart types represent differences in values of data points via series shapes on data plot the heat maps displays all differences with colors. That is why this section is quite important.

Color Scale

There are several ways of managing heat map's colors. The best one of them all is using a .colorScale() method to define heat map's colors. Use .ordinalColor() scale as a parameter for .colorScale() method to create an array of ranges and define the color for each range. All values for ranges are to be defined by a user.

  var chart = anychart.heatMap(dataSet);

  // create linerColor scale
  var colorScale = anychart.scales.ordinalColor();
  // set range of heat parameter's values and corresponding colors
    // set color for all points with the heat parameter less than 1200000
    {less: 1200000, color: "#B2DFDB"},
    // set color for all points with the heat parameter more than 1200000 but less than 3000000
    {from: 1200000, to: 3000000, color: "#004D40"},
    // set color for all points with the heat parameter more than 3000000
    {greater: 3000000, color: "#004D40"}

  // apply colorScale for colorizing heat map chart

Here is a sample of a heat map with .ordinalColor() scale:

JsFiddle Playground

Direct Coloring

Along with using color scale you can specify visual settings for an individual point. There are several sets for managing points visual appearance:

  • fill sets inner color of the point.
  • hoverFill sets point's inner color while a mouse is over the point.
  • stroke sets points border.
  • hoverStroke sets points border while a mouse is over the point.
  var chart = anychart.heatMap([
    {x: "Rare",             y: "Insignificant",  heat: 0, fill: "#9ACD32"},
    {x: "Rare",             y: "Minor",          heat: 0, fill: "#9ACD32"},
    {x: "Rare",             y: "Moderate",       heat: 0, fill: "#9ACD32"},
    {x: "Rare",             y: "Major",          heat: 0, fill: "#9ACD32"},
    {x: "Rare",             y: "Extreme",        heat: 0, fill: "#9ACD32"},
    {x: "Unlikely",         y: "Insignificant",  heat: 0, fill: "#9ACD32"},
    {x: "Unlikely",         y: "Minor",          heat: 0, fill: "#9ACD32"},
    {x: "Unlikely",         y: "Moderate",       heat: 0, fill: "#9ACD32"},
    {x: "Unlikely",         y: "Major",          heat: 1, fill: "#FFFF00"},
    {x: "Unlikely",         y: "Extreme",        heat: 1, fill: "#FFFF00"},
    {x: "Possible",         y: "Insignificant",  heat: 0, fill: "#9ACD32"},
    {x: "Possible",         y: "Minor",          heat: 0, fill: "#9ACD32"},
    {x: "Possible",         y: "Moderate",       heat: 1, fill: "#FFFF00"},
    {x: "Possible",         y: "Major",          heat: 1, fill: "#FFFF00"},
    {x: "Possible",         y: "Extreme",        heat: 1, fill: "#FFFF00"},
    {x: "Likely",           y: "Insignificant",  heat: 0, fill: "#9ACD32"},
    {x: "Likely",           y: "Minor",          heat: 1, fill: "#FFFF00"},
    {x: "Likely",           y: "Moderate",       heat: 1, fill: "#FFFF00"},
    {x: "Likely",           y: "Major",          heat: 2, fill: "#FF6347"},
    {x: "Likely",           y: "Extreme",        heat: 2, fill: "#FF6347"},
    {x: "Almost\nCertain",  y: "Insignificant",  heat: 0, fill: "#9ACD32"},
    {x: "Almost\nCertain",  y: "Minor",          heat: 1, fill: "#FFFF00"},
    {x: "Almost\nCertain",  y: "Moderate",       heat: 1, fill: "#FFFF00"},
    {x: "Almost\nCertain",  y: "Major",          heat: 2, fill: "#FF6347"},
      x: "Almost\nCertain",
      y: "Extreme",
      heat: 3,
      fill: "#FF0000",
      hoverFill: "#AA0000",
      stroke: {color: "#AA0000"},
      hoverStroke: {color: "#550000"}

Note: You can use only object as values for stroke and hoverStroke sets while fill and hoverFill sets use either string or object as a value. When you set color directly to a point you can omit "heat" in a data set.

JsFiddle Playground


Even though the .colorScale() is the most convenient way of managing heat map's colors you can still set a single color for all points of a heat map and define a color for points' border.

You can set heat map's colors either in your dataSet or using special methods. The easiest way to set the heat map's color is .fill() method.

You can set a solid fill for each cell of the heat map. Use .fill() method to define custom color for every cell. Information on setting a color for a custom range of heat parameters can be found in Color Scale section. .fill() method, "fill" parameter can be used to emphasize a chart point:–>

  var chart = anychart.heatMap(dataSet);
  // set inner color for every cell

Along with a single color for all points, you can manage the color of all points' borders. The heat map chart borders are controlled by .stroke() method. Alone with .stroke() method you can set "stroke" parameter for an individual point.

  // create chart
  var chart = anychart.heatMap(dataSet);

Here is a sample with solid inner color and adjusted strokes.

JsFiddle Playground


Labels are text boxes with additional information for presented data. You can tune labels using .labels() method.

  // create chart
  var chart = anychart.heatMap(dataSet);
  // labels settings
  var labels = chart.labels();
  // enable labels
    // get heat parameter of the point
    var value = (this.heat).toFixed(0);
    var main = "";
    // if value is more than three symbols long
    for (var i=1;(i*3)<value.length;i++)
      // insert space before every 3 symbols
      main = " " + value.substr(value.length-(i*3), 3) + main;
    // get the remaining part of the value
    var tail = value.substr(0, value.length-(main.length-main.length/4));
    // format value in appropriate way
    value = tail + main;
    return "$" + value

You can find information on managing labels content in Text Formatters article.

Here is a sample of a js Heat map with formatted labels.

JsFiddle Playground

Heat map is a kind of chart that usually contains quite a few points in dataSet. That is why heat maps have special .labelsDisplayMode() method for managing labels appearance on the chart plot. There are three possible modes of displaying labels: "clip", "drop", "alwaysShow".

  • "Clip" parameter makes all labels be displayed regardless the width of each point. If a label doesn't fit the point width, a part of this label will be cropped.
  • "Drop" parameter hides the whole label, if it doesn't fit point's width
  • "AlwaysShow" parameter force all labels to be shown despite the situation. Be careful using this parameter. Labels may overlap, if label's width is larger than point's width.

JsFiddle Playground


In this section we will explain how to tune heat map's tooltip. Method .tooltip() controls tooltip of the heat map. In Tooltip article you can find some information on how to adjust tooltip content and tooltip visual appearance.

  var chart = anychart.heatMap(dataSet);
  var tooltip = chart.tooltip();
  var title = tooltip.title();
    return this.y;
    return "Month: " + this.x + "\nOpens: " + this.heat + "%";

JsFiddle Playground


As far as AnyChart doesn't limit the number of points on a chart, you may face a problem of having too many data points on your chart plot. The solution of this problem is simple: use .xScroller() and .yScroller() methods. These methods create scrollers on the chart plot and limits the amount of visible data points at the same time.

You can manage chart's zoomed space using .xZoom() and .yZoom() methods. More information on scroller and zoom managing can be found in Scroller article.

  // create horizontal chart scroller
  var xScroller = chart.xScroller();
  // scroller settings
  // enables zoom on chart by default
  var xZoom = chart.xZoom();
  // define the number of visible points at the same time
  // create vertical chart scroller
  var yScroller = chart.yScroller();
  // scroller settings
  // enables zoom on chart by default
  var yZoom = chart.yZoom();
  // define the number of visible points at the same time

Here is a sample of html5 Heat map chart with horizontal and vertical scrollers:

JsFiddle Playground

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.3.0 version to see the up to date information.