Highcharts test tool

HTML

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

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

$(function () {

    $('#container').highcharts({
        
        chart: {
            type: 'heatmap',
            marginTop: 40,
            marginBottom: 40,
            plotBackgroundColor: 'none'/*{
                linearGradient: { x1: 1, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0.03, 'rgb(247, 88, 45)'],
                    [0.5, 'rgb(255, 224, 80)'],
                    [0.67, 'rgb(54, 64, 207)'],
                    [0.99, 'rgb(13, 163, 35)'],
                    [1, 'rgb(217, 186, 50']
                ]
            }*/
        },


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

        xAxis: {
            categories: ['A', 'B', 'C', 'D', 'E']
        },

        yAxis: {
            categories: ['< 1%', '2-10%', '11-50%', '51-90%', '91-100%'],
            title: null
        },

        colorAxis: {
            min: 0,
            minColor: 'transparent',
            maxColor:'transparent'
            //maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 320
        },

        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>';
            }
        },

        /*want to make this part dynamically populated*/
            series:[{
                data:[
                {x:0,y:0, value:100, color:'red'},
                {x:0,y:1, value:10, color:'red'},
                {x:0,y:2, value:20, color:'red'},
                {x:0,y:3, value:30, color:'red'},
                {x:0,y:4, value:40, color:'red'},
                {x:0,y:0, value:50, color:'red'},
                    
                {x:1,y:0,...