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

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

CSS

#container,
#container1 {
  height: 600px;
  width: 600px;
  margin: 0 auto;
}

JavaScript

function renderCharts(id, data) {
  Highcharts.chart(id, {
    chart: {
      type: 'tilemap',
      height: 200,
      width: 200,
      inverted: true
    },

    title: {
      text: 'Tilemap demo'
    },

    subtitle: {
      text: 'Tilemap grid coordinates'
    },

    xAxis: {
      visible: false
    },

    yAxis: {
      visible: false
    },

    legend: {
      enabled: false
    },

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

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

    series: [{
      keys: ['x', 'y'],
      color: '#fdfdfd',
      data,
      colsize: 0.15,
      rowsize: 0.15,
      pointPadding: 1
    }]
  });
}

renderCharts('container', [
  [0, 0],
  [0, 1],
  [0, 2],
  [1, 0],
  [1, 1],
]);