Highcharts Demo

by amrutaJgtp

HTML

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

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

CSS

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

JavaScript

Highcharts.mapChart("container", {
  chart: {
    inverted: false,
    backgroundColor: "rgba(255,255,255,0)",
    plotBackgroundColor: "rgba(255,255,255,0)",
    zoomType: null,
    resetZoomButton: { theme: { style: { visibility: "hidden" } } },
    spacingBottom: 5,
    spacingTop: 10,
    map: "custom",
    animation: false,
  },
  title: {
    text: ".",
    style: { color: "rgba(255, 255, 255, 0)", fontSize: "1px" },
    floating: true,
    margin: 0,
  },
  tooltip: {
    enabled: true,
    borderWidth: 1,
    borderRadius: 1,
    backgroundColor: "#ffffff",
    useHTML: true,
    shared: false,
    crosshairs: [null, null],
  },
  plotOptions: {
    series: {
      animation: { duration: 700 },
      cursor: "pointer",
      allowPointSelect: true,
      showInLegend: true,
      turboThreshold: 0,
      stickyTracking: false,
      events: {},
      point: { events: {} },
      borderRadius: 0,
      nullColor: "rgba(248,248,248,1)",
      borderColor: "rgba(192,192,192,1)",
      mapData: [
        { id: "id0", name: "path1569", path: "M86,44,170,44" },
        { id: "id1", name: "path1571", path: "M104,40L104,44" },
        { id: "id2", name: "path1573", path: "M125,40L125,44" },
        { id: "id3", name: "path1575", path: "M149,40L149,44" },
        { id: "id4", name: "path1612", path: "M162,44,163,112" },
        { id: "id5", name: "path1614", path: "M137,112L163,112" },
        { id: "id6", name: "path1616", path: "M163,99,169,99" },
        { id: "id7", name: "path1618", path: "M155,94,163,94" },
        { id: "id8", name: "path1620", path: "M155,77,163,77" },
        { id: "id9", name: "path1622", path: "M154,60L162,60" },
        { id: "id10", name: "path1624", path: "M133,59,133,97" },
        { id: "id11", name: "path1626", path: "M143,97,133,97" },
        { id: "id12", name: "path1628", path: "M143,77,133,77" },
        { id: "id13", name: "path1630", path: "M142,60,133,59" },
        { id: "id14", name: "path1632", path: "M7,131,219,130"...