Heat Maps

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.

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:

https://app.zingsoft.com/demos/embed/HSYLKA9Y
https://app.zingsoft.com/demos/embed/HSYLKA9Y
{
  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.

https://app.zingsoft.com/demos/embed/A7CGASSL
https://app.zingsoft.com/demos/embed/A7CGASSL
{
  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.

https://app.zingsoft.com/demos/embed/2OPTD3CL
https://app.zingsoft.com/demos/embed/2OPTD3CL
{
  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.

https://app.zingsoft.com/demos/embed/TAWIKOXH
https://app.zingsoft.com/demos/embed/TAWIKOXH
{
  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.

https://app.zingsoft.com/demos/embed/7IUPVC5Q
https://app.zingsoft.com/demos/embed/7IUPVC5Q
{
  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.

https://app.zingsoft.com/demos/embed/BQN4RL3Q
https://app.zingsoft.com/demos/embed/BQN4RL3Q
{
  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.

https://app.zingsoft.com/demos/embed/Q6F0JVWV
https://app.zingsoft.com/demos/embed/Q6F0JVWV
{
  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.

https://app.zingsoft.com/demos/embed/4Q12U3QN
https://app.zingsoft.com/demos/embed/4Q12U3QN
{
  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.

https://app.zingsoft.com/demos/embed/VEXLOG02
https://app.zingsoft.com/demos/embed/VEXLOG02
{
  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.

https://app.zingsoft.com/demos/embed/PZ38WCDU
https://app.zingsoft.com/demos/embed/PZ38WCDU
{
  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.

https://app.zingsoft.com/demos/embed/1PHW2972
https://app.zingsoft.com/demos/embed/1PHW2972
{
  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.

https://app.zingsoft.com/demos/embed/E2QRXZME
https://app.zingsoft.com/demos/embed/E2QRXZME
{
  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.

https://app.zingsoft.com/demos/embed/8Q04A8PX
https://app.zingsoft.com/demos/embed/8Q04A8PX
{
  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.

https://app.zingsoft.com/demos/embed/7JGGLIO6
https://app.zingsoft.com/demos/embed/7JGGLIO6
{
  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 ruleattributes 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.

https://app.zingsoft.com/demos/embed/J41PGCTO
https://app.zingsoft.com/demos/embed/J41PGCTO
{
  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.

https://app.zingsoft.com/demos/embed/MBDBXMZS
https://app.zingsoft.com/demos/embed/MBDBXMZS
{
  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.

https://app.zingsoft.com/demos/embed/TCFX34SF
https://app.zingsoft.com/demos/embed/TCFX34SF
{
  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]}
  ]
}

Heatmap Plugin

The heatmap plugin allows you to represent data values through color coding and shading on different chart types. Often used with larger data sets, they are useful for identifying patterns, areas of concentration, and/or data variance. The heatmap object can be modified to display data according to color, brightness, size, blur amount, and more. Below are a few examples of using the heatmap plugin on different chart types. To include the heatmap plugin, add a heatmap object to your chart object. Our Heatmap JSON Attributes/Syntax page provides a list of all related attributes.

Radar Chart
https://app.zingsoft.com/demos/embed/PKYU82XV
https://app.zingsoft.com/demos/embed/PKYU82XV
javascript { type : 'radar', heatmap : { graph : { keyScale : 'scale-k', valScale : 'scale-v' }, brushType : 'circle', composite : true, size : 10, blur : 20, alpha : 1, tooltip : { decimals : 1 }, async : false }, };
Map
https://app.zingsoft.com/demos/embed/PUG10N1W
https://app.zingsoft.com/demos/embed/PUG10N1W
javascript { heatmap : { alpha : 1, tooltip : { decimals : 0, thousandsSeparator : '.', text : '~ %value people' }, sortData : true, async : true, brushType : 'square', size : 3, blur : 1 }, };
Line
https://app.zingsoft.com/demos/embed/PJ0UW9K1
https://app.zingsoft.com/demos/embed/PJ0UW9K1
javascript { type: 'line', heatmap : { brushType : 'rectangle', blur : 0, alpha : 1, graph : {}, tooltip : { text : '<strong>%scale-key-text %scale-value-text</strong><br>Avg. Temperature: %value\u2103' }, async : false, gradientStops : '0 0.5 0.9 1', gradientColors : '#3060cf #fffbbc #c4463a #c4463a', minValue : -15, maxValue : 25 }, };

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.