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"
    },
    title: {
      text: ".",
      style: { color: "rgba(255, 255, 255, 0)", fontSize: "1px" },
      floating: true,
      margin: 0,
    },
    tooltip: {
      enabled: true
    },
    plotOptions: {
      series: {
        
        nullColor: "rgba(248,248,248,1)",
        borderColor: "rgba(192,192,192,1)",
        mapData: [
          {
            id: "id0",
            name: "path165",
            path: "M87,44,77,44,67,44,65,35,61,26,69,20,77,14,85,20,93,26,89,35z",
          },
          {
            id: "id1",
            name: "path231",
            path: "M40,137,26,136,11,137,7,123,2,109,14,101,25,92,37,101,49,109,44,122z",
          },
          {
            id: "id2",
            name: "technical writer",
            path: "M23,218,16,218,10,218,8,212,5,206,11,202,16,198,21,202,26,205,24,211z",
          },
          {
            id: "id3",
            name: "Business  Analyst",
            path: "M10,30L51,30,51,73,10,73,10,30",
          },
          {
            id: "id4",
            name: "HR_ADMIN",
            path: "M118,25L167,25,167,117,118,117,118,25",
          },
          {
            id: "id5",
            name: "rect225",
            path: "M177,26L203,26,203,99,177,99,177,26",
          },
          {
            id: "id6",
            name: "QA",
            path: "M11,149L115,149,115,184,11,184,11,149",
          },
          {
            id: "id7",
            name: "tech_manager",
            path: "M46,202L140,202,140,233,46,233,46,202",
          },
          {
            id: "id8",
            name: "Finance",
            path: "M112,90C112,76,101,65,87,65C74,65,63,76,63,90C63,104,74,115,87,115C101,115,112,104,112,90Z",
          },
          {
            id: "id9",
            name: "developer",
            path:...