Show Nav

Heat Map Charts

Overview

A heat map or heat chart represents data values through color coding and shading. Often used with larger data sets, they are useful for identifying patterns, areas of concentration, and/or data variance. Our heat maps are highly customizable. They can be modified to display data according to color brightness, size, vertical or horizontal bars, background images, and more. We explain how to configure your scales, incorporate styling and rules, and include value boxes and tooltips. See our ZingChart Gallery for further examples of heat map charts.

Heat Map Chart Type

In your chart object, add a "type" attribute. Set the value to "heatmap". Without further modification, a basic heat map with three data sets looks like this:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Series Data

Heat map charts support single or multiple data sets. Each "values" array corresponds to a heat map row, provided in the following format:

{"values": [val1, val2, ..., valN]},
{"values": [val1, val2, ..., valN]},
...,
{"values": [val1, val2, ..., valN]}

By default, the rows appear on your chart ordered from bottom to top (similar to stacking). You can reverse this, however, so that your rows appear from top to bottom. Create a "scale-y" object. Add a "mirrored" attribute, and set the value to true. Compare the below chart to the chart in the above section to see the difference. This attribute is useful in that it allows your heat map and series array to visually match each other.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "scale-y": {
    "mirrored": true    //Flips data so that rows appear from top to bottom.
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Heat Map-Specific Properties

You can modify how your heat map displays data. Using aspects, data can be displayed according to color brightness, size, vertical bars, horizontal bars, or background images. You can also specify your aspect ratios and what scale your heat map values are drawn against.

Aspects

Use the "aspect" attribute to modify your heat map's appearance. Create a "plot" object, and place your "aspect" attribute inside it. Heat map value options include: "brightness", "size", "vertical", "horizontal", and "none".

Brightness

Our heat maps display data according to color brightness or intensity. Since this is the default aspect, specifying their value ("brightness") as shown in the below chart is optional.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "brightness"
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

Size

Showing data variance by size is another way to visualize heat map chart data. Use the "size" value to display values as rectangles/squares.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "size"
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

Vertical Bars

Use the "vertical" value to display heat chart data as a series of vertical bars. This can create a small multiple or trellis chart effect.

Note: The "min-ratio", "max-ratio", and/or "reference" attributes, discussed further below, may be useful for adjusting the appearance of your bars.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "vertical"
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

Horizontal Bars

To display heat map data as a series of horizontal bars, use the "horizontal" value. This is another way to create a trellis chart or small multiple effect with your data.

Note: You can use the "min-ratio", "max-ratio", and/or "reference" attributes, discussed further below, to adjust the sizing and appearance of your bars.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "horizontal"
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

None

Use the "none" value to turn off all aspects. Your data will display as a series of solid colors, as shown below.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "none"
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

The "none" aspect is most useful with rules, which are discussed in the Rules section further below. You can use rules to create heat map charts where data values that fall in a certain range are assigned to a specific color: red, yellow, or green.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "none",
    "border-radius": "5px",
    "rules": [
      {
        "rule": "%v >= 50",
        "background-color": "green"
      },
      {
        "rule": "%v < 50 && %v >= 30",
        "background-color": "yellow"
      },
      {
        "rule": "%v < 30",
        "background-color": "red"
      }
    ]
  },
  "scale-x": {
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "guide": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

You can also use background images in lieu of solid colors. In the below chart, data values were sorted and assigned to ratings images for Best, Good, Average, Not So Good, and Worst.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plotarea": {
    "adjust-layout": "auto"
  },
  "plot": {
    "aspect": "none",
    "background-color": "none",
    "background-repeat": false,
    "rules": [
      {
        "rule": "%v >= 80",
        "background-image": "https://www.zingchart.com/package/examples/images/icon-best.png"
      },
      {
        "rule": "%v < 80 && %v >= 60",
        "background-image": "https://www.zingchart.com/package/examples/images/icon-good.png"
      },
      {
        "rule": "%v < 60 && %v >= 40",
        "background-image": "https://www.zingchart.com/package/examples/images/icon-average.png"
      },
      {
        "rule": "%v < 40 && %v >= 20",
        "background-image": "https://www.zingchart.com/package/examples/images/icon-not-so-good.png"
      },
      {
        "rule": "%v < 20",
        "background-image": "https://www.zingchart.com/package/examples/images/icon-worst.png"
      }
    ],
    "hover-state": {
      "background-color": "yellow"
    }
  },
  "scale-x": {
    "guide": {
      "visible": false
    }
  },
  "scale-y": {
    "guide": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20]},
    {"values": [34,32,87,65,9,17,40,12,17,22,13,42,46,27,42,33,17,63,47,42]},
    {"values": [90,19,50,39,12,49,14,61,59,60,23,42,52,12,34,23,16,45,32,31]},
    {"values": [23,45,12,37,31,35,64,71,63,26,12,36,37,21,74,35,26,41,23,21]},
    {"values": [43,50,59,60,61,49,23,14,51,46,21,63,24,12,42,31,33,25,12,15]},
    {"values": [51,59,12,15,29,31,52,32,41,23,15,63,12,23,51,41,23,32,31,17]},
    {"values": [12,23,26,35,54,34,35,36,37,38,23,18,48,54,52,56,60,70,43,62]},
    {"values": [15,59,60,61,15,79,11,21,6,19,3,28,17,34,5,20,13,15,16,31]},
    {"values": [61,54,37,41,36,58,42,21,12,17,32,41,64,27,48,35,42,9,41,11]},
    {"values": [24,45,12,71,60,23,33,41,53,27,35,52,23,46,42,64,35,37,51,23]},
    {"values": [63,62,23,63,54,73,26,36,47,63,23,45,75,32,45,16,35,24,52,3]},
    {"values": [22,30,11,56,85,34,75,54,76,45,36,23,74,86,88,56,49,28,34,31]},
    {"values": [23,82,68,46,58,47,68,63,43,12,36,75,77,56,45,31,90,89,31,35]},
    {"values": [16,85,86,74,54,65,73,47,30,31,34,35,58,51,64,26,23,12,43,40]},
    {"values": [12,87,36,53,62,84,45,65,73,52,34,28,25,19,30,33,37,34,63,77]}
  ]
}

Minimum and Maximum Ratios

Depending on your data type, you can change the minimum and/or maximum ratios (between 0-1) that your heat map aspect operates within. In your "plot" object, add the "min-ratio" and/or "max-ratio" attribute(s). The default values for the minimum and maximum ratios are 0.2 and 1, respectively. Changing the values affects the appearance of your data. To illustrate the difference, the below chart displays three rows in vertical aspect with varying ratios.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "vertical"
  },
  "plotarea": {
    "adjust-layout": "auto"
  },
  "scale-y": {
    "labels": ["0.7 and 1", "0 and 0.3", "0.2 and 1<br>(default)"]
  },
  "series": [
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "min-ratio": 0.7,
      "max-ratio": 1
    },
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "min-ratio": 0,
      "max-ratio": 0.3
    },
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "min-ratio": 0.2,   //default
      "max-ratio": 1      //default
    }
  ]
}

Scale Reference

The "reference" attribute is another way to adjust the scaling and appearance of your heat map data. Add the attribute to your "plot" object. There are four value options: "plot-max"(default), "plot-total", "chart-max", and "chart-total". "plot-max" displays heat map values in relation to the largest value in that particular plot. "plot-total" displays values in relation to the sum of all values in that particular plot. "chart-max" displays heat map values in relation to the largest value in your total chart. "chart-total" takes into consideration the sum of all of your heat map values. To illustrate the difference, the below chart displays all four reference values applied to the same data figures.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "vertical"
  },
  "plotarea": {
    "adjust-layout": "auto"
  },
  "scale-y": {
    "labels": ["chart-total", "chart-max", "plot-total", "plot-max<br>(default)"]
  },
  "series": [
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "reference": "chart-total"
    },
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "reference": "chart-max"
    },
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "reference": "plot-total"
    },
    {
      "values": [59,15,5,30,60,99,28,33,34,51,12,30,15,39,15,71,23,51,29,20],
      "reference": "plot-max" //default
    }
  ]
}

Further Customization

Further customize your heat map chart by configuring your scales, styling your background colors and borders, and adding value boxes and tooltips.

Scale Configuration

With heat map charts, you'll most likely want to provide scale labels for both axes, as well as adjust the visibility of your axis lines, plot lines, and tick marks. In your "scale-x" and/or "scale-y" objects, use the "labels" array to specify your scale labels. You can turn off the visibility of your axis lines by adding a "line-color" attribute and setting the value to "none". Plot lines and tick marks are styled in a "guide" object and "tick" object, respectively. Inside, add a "visible" attribute and set the value to false. You can also change your axis placement with the "placement" attribute, and by setting the value to "opposite". For further information on scales, see our Configuring Your Scales Tutorial. Also browse the JSON Attributes/Syntax pages for scale-x and scale-y.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],  //X-Axis Scale Labels
    "line-color": "none",   //Axis Lines
    "guide": {              //Plot Lines
      "visible": false
    },
    "tick": {               //Tick Marks
      "visible": false
    },
    "placement": "opposite" //To change the placement of your axis. 
  },
  "scale-y": {
    "labels": ["SD","OC","LA"], //Y-Axis Scale Labels
    "line-color": "none",   //Axis Lines
    "guide": {              //Plot Lines
      "visible": false
    },
    "tick": {               //Tick Marks
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Heat Map Styling

Heat map chart styling can be applied to background colors, borders, rounded corners, hover states, and more. Place all styling attributes inside your "plot" object. (To apply styling to a specific plot, place the attributes inside the applicable series object.) You can change your heat map value colors with the "background-color" attribute, as well as include value borders with the "border-width", "border-color", and "line-style" attributes. To create rounded corners, use a "border-radius" attribute and provide a pixel value. You can also specify how values appear when you hover over them. Use a "hover-state" object. Place your desired styling attributes inside the object. For additional styling and customization options, see our Plot/Series JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "background-color": "red",  //Provide a RGB or hexadecimal color value.
    "border-width": 2,          //Provide a pixel value.
    "border-color": "orange",   //Provide a RGB or hexadecimal color value.
    "line-style": "dotted",     //or "solid" or "dashed".
    "border-radius": "25px",    //Provide a pixel value for rounded corners.
    "hover-state": {    //How values appear when hovered over.
      "background-color": "purple",
      "border-width": 2,
      "border-color": "green",
      "line-style": "dashed",
      "border-radius": "100px"
    }
  },
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    },
    "placement": "opposite"
  },
  "scale-y": {
    "labels": ["SD","OC","LA"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Rules

Rules are highly useful because they allow you to assign a single color to a specified data range. Our Logic Rules Tutorial provides an overview on rules. With heat map charts, you'll want to add a "rules" array to your "plot" object. Inside the array, each rule is contained inside its own object. Use the "rule" attribute to provide your condition (e.g., "%v >= 60"). The styling attributes you provide in that object will be what appears when that condition is met. See the below chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "background-color": "red",
    "border-width": 2,
    "border-color": "orange",
    "line-style": "dotted",
    "border-radius": "25px",
    "hover-state": {
      "visible": false
    },
    "rules": [
      {
        "rule": "%v >= 60",
        "background-color": "orange",
        "border-width": 2,
        "border-color": "yellow",
        "line-style": "solid",
        "border-radius": "50px"
      },
      {
        "rule": "%v == 99",
        "background-color": "yellow",
        "border-width": 2,
        "border-color": "green",
        "line-style": "dashed",
        "border-radius": "100px"
      }
    ]
  },
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    },
    "placement": "opposite"
  },
  "scale-y": {
    "labels": ["SD","OC","LA"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Background Images

In lieu of colors, you can use images to represent data values in your heat map. Use the same "rules" array and "rule" attributes in your "plot" object. But then use a "background-image" attribute, where you'll provide an image link contained in quotes as your value. In the below chart, images for sunny, partly cloudy, and cloudy weather were used.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "aspect": "none",
    "background-color": "none",
    "background-repeat": false,
    "rules": [
      {
        "rule": "%v >= 50",
        "background-image": "https://www.zingchart.com/package/examples/images/sunny.png"
      },
      {
        "rule": "%v < 50 && %v >= 30",
        "background-image": "https://www.zingchart.com/package/examples/images/partly-cloudy.png"
      },
      {
        "rule": "%v < 30",
        "background-image": "https://www.zingchart.com/package/examples/images/cloudy.png"
      }
    ],
    "hover-state": {
      "background-color": "#66CCFF"
    }
  },
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    },
    "placement": "opposite"
  },
  "scale-y": {
    "labels": ["SD","OC","LA"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Value Boxes

Value boxes are not visible on heat map charts by default. To include them, add a "value-box" object to your "plot" object. You can place any value box-specific styling attributes inside. For a full list of styling options, see our Value Box JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "value-box": {},
    "background-color": "red",
    "border-width": 2,
    "border-color": "orange",
    "line-style": "dotted",
    "border-radius": "25px",
    "hover-state": {
      "visible": false
    },
    "rules": [
      {
        "rule": "%v >= 60",
        "background-color": "orange",
        "border-width": 2,
        "border-color": "yellow",
        "line-style": "solid",
        "border-radius": "50px"
      },
      {
        "rule": "%v == 99",
        "background-color": "yellow",
        "border-width": 2,
        "border-color": "green",
        "line-style": "dashed",
        "border-radius": "100px"
      }
    ]
  },
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    },
    "placement": "opposite"
  },
  "scale-y": {
    "labels": ["SD","OC","LA"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Tooltips

Tooltips appear when you hover over a value on your heat map chart. You can style and customize how they appear by adding a "tooltip" object to your chart object. Our Tooltips JSON Attributes/Syntax page provides a list of all related attributes. Specifically for tooltip text, especially when working with rules, you can use "tooltip-text" attributes, which you'll place inside your "plot" object and individual "rule" objects.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "heatmap",
  "plot": {
    "background-color": "red",
    "border-width": 2,
    "border-color": "orange",
    "line-style": "dotted",
    "border-radius": "25px",
    "hover-state": {
      "visible": false
    },
    "tooltip-text": "%v Apples",
    "rules": [
      {
        "rule": "%v >= 60",
        "background-color": "orange",
        "border-width": 2,
        "border-color": "yellow",
        "line-style": "solid",
        "border-radius": "50px",
        "tooltip-text": "%v Oranges"
      },
      {
        "rule": "%v == 99",
        "background-color": "yellow",
        "border-width": 2,
        "border-color": "green",
        "line-style": "dashed",
        "border-radius": "100px",
        "tooltip-text": "%v Bananas"
      }
    ]
  },
  "scale-x": {
    "labels": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    },
    "placement": "opposite"
  },
  "scale-y": {
    "labels": ["SD","OC","LA"],
    "line-color": "none",
    "guide": {
      "visible": false
    },
    "tick": {
      "visible": false
    }
  },
  "series": [
    {"values": [59,15,5,30,60,99,28]},
    {"values": [34,32,87,65,9,17,40]},
    {"values": [90,19,50,39,12,49,14]}
  ]
}

Summary

Got a question about how heat map charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.