Heat map

author(s): Torstein Hønsi

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div id="container" style="height: 450px; max-width: 450px; margin: 0 auto"></div>

<pre id="csv" style="display: none">Date, Time,...

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    inverted: true
  },

  data: {
    csv: document.getElementById('csv').innerHTML
  },

  title: {
    text: 'Highcharts heat map',
    align: 'left'
  },

  subtitle: {
    text: 'Temperature variation by day and hour through May 2017',
    align: 'left'
  },
  plotOptions: {
    series: {
      marker: {
        symbol: 'circle'
      }
    }
  },

  xAxis: {
    tickPixelInterval: 50,
    min: Date.UTC(2017, 4, 1),
    max: Date.UTC(2017, 4, 30)
  },

  yAxis: {
    title: {
      text: null
    },
    labels: {
      format: '{value}:00'
    },
    minPadding: 0,
    maxPadding: 0,
    startOnTick: false,
    endOnTick: false,
    tickPositions: [0, 6, 12, 18, 24],
    tickWidth: 1,
    min: 0,
    max: 23
  },

  colorAxis: {
    stops: [
      [0, '#3060cf'],
      [0.5, '#fffbbc'],
      [0.9, '#c4463a']
    ],
    min: -5
  },

  series: [{
    borderWidth: 0,
    colsize: 24 * 36e5, // one day
    tooltip: {
      headerFormat: 'Temperature<br/>',
      pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
    }
  }]
});