Highcharts Demo

author(s): Torstein Hønsi

by amrutaJgtp

HTML

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


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

CSS

#container {
    height: 500px;
    min-width: 310px;
    margin: 0 auto;
}

.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

(async () => {
  // Initialize the chart
  Highcharts.mapChart("container", {
    chart: {
      map: "custom"
    },
    tooltip: {
      enabled: true
    },
    plotOptions: {
      series: {
        cursor: "pointer",
        showInLegend: true,
        borderRadius: 0,
        nullColor: "rgba(248,248,248,1)",
        borderColor: "rgba(192,192,192,1)",
        "mapData": [
                {
                    "id": "id0",
                    "name": "path1140",
                    "path": "M146,65L157,65L157,69L146,69z"
                },
                {
                    "id": "id1",
                    "name": "path1140-1",
                    "path": "M146,57L157,57L157,61L146,61z"
                },
                {
                    "id": "id2",
                    "name": "path1140-1-7",
                    "path": "M146,57L157,57L157,62L146,62z"
                },
                {
                    "id": "id3",
                    "name": "path1140-5",
                    "path": "M146,72L157,72L157,76L146,76z"
                },
                {
                    "id": "id4",
                    "name": "path1140-5-2",
                    "path": "M145,79L157,79L157,83L145,83z"
                },
                {
                    "id": "id5",
                    "name": "path1140-5-2-9",
                    "path": "M145,85L157,85L157,89L145,89z"
                },
                {
                    "id": "id6",
                    "name": "path1140-5-2-9-7",
                    "path": "M145,92L156,92L156,96L145,96z"
                },
                {
                    "id": "id7",
                    "name": "path1140-5-2-9-2",
                    "path": "M145,98L156,98L156,103L145,103z"
                },
                {
                    "id": "id8",
                    "name": "path1140-5-2-9-5",
                    "path": "M145,105L156,105L156,109L145,109z"
                },
                {
                   ...