Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

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

Highcharts.chart('container', {
navigation: {
        buttonOptions: {
            enabled: false
        }
    },
    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    yAxis: {
        categories: ['Dev1', 'Dev2', 'Dev3'],
        title: null
    },

    colorAxis: {
        dataClasses:
					[{color:'#32CD32',from:0,name:'safe',to:10},
          {color:'#FF7F50',from:11,name:'warning',to:50},
          {color:'#FF0000',from:51,name:'alert',to:999}
          ]
//        min: 0,
//        minColor: '#FFFFFF',
//        maxColor: '#FFF000' //Highcharts.getOptions().colors[1]
        
    },

    legend: {
        enabled: false
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [ 
        [34, 0, 38], [34, 1, 5], [34, 2, 8], [34, 3, 117], [34, 4, 115], 
        [35, 0, 88], [35, 1, 32], [35, 2, 12], [35, 3, 6], [35, 4, 120], 
        [36, 0, 13], [36, 1, 44], [36, 2, 88], [36, 3, 98], [36, 4, 96], 
        [31, 0, 92], [31, 1, 58], [31, 2, 78], [31, 3, 117], [31, 4, 48],  
        [33, 0, 72], [33, 1, 132], [33, 2, 114], [33, 3, 19], [33, 4, 16], 
        [32, 1, 15], [32, 2, 123], [32, 3, 64], [32, 4, 52], 
        
        
        [37, 0, 31], [37, 1, 1], [37, 2, 82], [37, 3, 32], [37, 4, 30], 
        [38, 0, 85], [38, 1, 97], [38, 2, 123], [38, 3, 64], [38, 4, 84], 
        [39, 0, 47], [39, 1, 114], [39, 2, 31], [39, 3, 48], [39, 4, 91]
        ],
        dataLabels: {
 ...