Highcharts Demo

author(s): Mustapha Mekhatria

by dandiebolt

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/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

#container {
	min-width: 420px;
	max-width: 650px;
	margin: 0 auto;
}

JavaScript

//http://klingonska.org/ref/time.html#week

Highcharts.chart('container', {
    chart: {
        type: 'tilemap',
        inverted: true,
        height: '80%'
    },

    title: {
        text: '<img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><img src="https://i.stack.imgur.com/GHiVy.jpg" width="50"><h1>Anglicized Klingon Calendar</h1>',
        useHTML: true
    },

    subtitle: {
        text: '<a href="http://klingonska.org/ref/time.html#week">Source</a>'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        visible: false
    },

    colorAxis: {
        dataClasses: [{
            from: 0.0,
            to:   1.5,
            color: '#a361c7',
            name: 'Sun'
        }, {
            from: 1.5,
            to:   2.5,
            color: '#64ac48',
            name: 'Mon'
        }, {
            from: 2.5,
            to:   3.5,
            color: '#c75a87',
            name: 'Tue'
        }, {
            from: 3.5,
            to:   4.5,
            color: '#4aac8d',
            name: 'Wed'
        }, {
            from: 4.5,
            to:   5.5,
            color: '#cb6242',
            name: 'Thu'
        }, {
            from: 5.5,
            to:   6.5,
            color: '#6587cd',
            name: 'Fri'
        }, {
            from: 6.5,
            to:   7.5,
            color: '#a8943f',
            name: 'Sat'
        }]
    },

    tooltip: {
        headerFormat: '',

        formatter: function() {
          if (this.point.event) {
           ...