Highcharts Demo

author(s): Øystein Moseng

by sridhar reddy

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>

<div id="container1" class="ct"></div>
<div id="container2" class="ct"></div>
<div id="container3" class="ct"></div>
<div id="container4" class="ct"></div>

CSS

.ct {
	width: 100%;
  height: 49%;
  float: left;
  border: 1px solid black;
}

JavaScript

function createChart(container, inverted, reversed) {

Highcharts.chart(container, {
    chart: {
        type: 'tilemap',
        inverted: true,
        height: 88,
        margin: 0,
        padding: 0,
        width: 270
    },

    title: {
        text: ``
    },

    xAxis: {
        visible: false,
    },

    yAxis: {
        visible: false,
    },
    
    credits: {
    	enabled: false
    },

    legend: {
        enabled: false
    },

    tooltip: {
        headerFormat: '',
        pointFormat: 'x: {point.x}<br>y: {point.y}'
    },

    plotOptions: {
        series: {
        		tileShape: 'hexagon',
            dataLabels: {
                enabled: false,
                color: '#000000',
                format: '{point.x}, {point.y}'
            },
            borderWidth: 1,
            borderColor: '#777'
        }
    },

    series: [{
        keys: ['x', 'y'],
        color: '#fdfdfd',
        data: [
            [0, 0],
            [1, 0],
            [1, 2],
            [1, 3],
            [1, 4],
            [1, 5],
            [1, 6],
            [1, 7],
            [0, 1],
            [1, 1],
            [2, 0],
            [2, 1],
            [0, 4],
            [0, 2],
            [0, 3],
            [0, 5],
            [0, 6]
        ],
        pointPadding: 2
    }]
});
}

createChart('container1', false, false);