HeatMap

x : Value y : String

by amrutaJgtp

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

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

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'heatmap'
    },


    title: {
      text: 'Heat map',
      align: 'left'
    },

    xAxis: {
      type: 'linear' //attribute not given in API
      //has no effect when using CSV format
    },

    yAxis: {
      categories: ['Sunday', 'Monday', 'Tuesday', 'Wendnesday', 'Thursday'],
      title: {
        text: null
      },
    },

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

    series: [{
      borderWidth: 0,
      data: [
        [0, 0, 2.0],
        [0, 1, -3.7],
        [0, 2, 1.5],
        [0, 3, -1.9],
        [0, 4, -1.5],
        [1, 0, -1.5],
        [1, 1, 1.1],
        [1, 2, -1.1],
        [1, 3, 0.9],
        [1, 4, 2.3],
        [2, 0, -1.1],
        [2, 1, -2.8],
        [2, 2, -3.3],
        [2, 3, 1.2],
         [2, 4, -2.4]
      ]

    }]

  });
});