Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80,
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      visible: false
    },

    title: {
      text: 'Example'
    },

    colorAxis: {
      stops: [
        [0, 'green'],
        [0.5, 'green'],
        [0.49, 'yellow'],
        [0.9, 'yellow'],
        [0.9, 'red']
      ],
      min: 0,
      max: 1,
      startOnTick: false,
      endOnTick: false
    },
    legend: {
      enabled: false
    },
    series: [{
      borderWidth: 10,
      borderColor: 'white',
      keys: ['x', 'y', 'value', 'name'],
      data: [
        [0, 0, 1, 'name1'],
        [0, 1, 0, 'name2'],
        [0, 2, 0.5, 'name3'],
        [0, 3, 0.5, 'name4'],
        [0, 4, 0, 'name5'],
        [1, 0, 1, 'name6'],
        [1, 1, 0, 'name7'],
        [1, 2, 1, 'name8'],
        [1, 3, 0, 'name9'],
        [1, 4, 0, 'name10']
      ],
      dataLabels: {
        enabled: true,
        color: '#000000',
        formatter: function() {
          return (this.key)
        }
      }
    }]

  });
});