Highcharts Demo

author(s): Torstein Hønsi

by pepperdigital

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', {

    chart: {
        type: 'heatmap',
        backgroundColor: '#000000',

        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },
                credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },

    title: {
        text: ''
    },

    xAxis: {
    labels: {
           style: {
                color: '#FFFFFF'
            },
        },
        opposite: true,
        categories: ['CH','DEU','FRA','ITA','GBR','ESP','NLD','POL','ROM','SWE']
    },

    yAxis: {
    labels: {
           style: {
                color: '#FFFFFF'
            },
        },
        categories: ['Leading a team',
'Being your own boss',
'Working with people from diverse backgrounds',
'Clear (job)growth opportunities',
'Having to deal with complex problems and challenging tasks',
'Social acceptability',
'Flexible working hours',
'Flexibility to change tasks and working environment',
'The possibility to broaden my skills',
'Clear and well defined goals',
'Remuneration',
'Doing something in line with my personal values',
'Seeing the purpose in what I do',
'Job security and stability',
'Being trusted by colleagues, co-workers, clients, supervisors',
'Clear definition of responsibilities',
'Competent leadership'],
        title: null
    },

    colorAxis: {
        min: 0,
        minColor: '#00A3E0',
        maxColor: '#FF272D'
    },

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

    tooltip: {
        formatter: function () {
            return '<b>' +
             this.series.yAxis.categories[this.point.y] + 
            '</b><br>is <b>'
            + this.point.value + 
            '</b> in order of importance in <b>'
            + this.series.xAxis.categories[this.point.x] + '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
       ...