World population 2016 by country

by amrutaJgtp

HTML

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

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

CSS

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

JavaScript

;(async () => {
  const topology = await fetch(
    "https://code.highcharts.com/mapdata/custom/world.topo.json",
  ).then((response) => response.json())

  const data = [
    {
      code3: "BHS",
      z: 11391,
      code: "BS",
    },
    {
      code3: "IND",
      z: 132471,
      code: "IN",
    },
    {
      code3: "AUS",
      z: 24211,
      code: "AU",
    },
  ]

  Highcharts.mapChart("container", {
    chart: {
      map: topology,
    },

    title: {
      text: "World population 2016 by country",
    },

    legend: {
      enabled: false,
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: "bottom",
      },
    },

    tooltip: {
      enabled: true,
      borderWidth: 1,
      borderRadius: 1,
      backgroundColor: "#ffffff",
      style: {
        color: "#000000",
        fontSize: "1rem",
        fontFamily: "Open Sans",
        fontWeight: "normal",
        fontStyle: "normal",
        textDecoration: "none",
      },
      useHTML: true,
      shared: true,
      crosshairs: [null, null],
    },

    plotOptions: {
      series: {
        animation: {
          duration: 700,
        },
        cursor: "pointer",
        allowPointSelect: true,
        showInLegend: true,
        turboThreshold: 0,
        stickyTracking: false,
        events: {},
        point: {
          events: {},
        },
        borderRadius: 0,
        borderColor: "rgba(192,192,192,1)",
      },
    },

    series: [
      {
        name: "Countries",
        color: "#E0E0E0",
        enableMouseTracking: false,
      },
      {
        type: "mapbubble",
        marker: {
          states: {
            select: {
              fillColor: null,
              lineColor: "#33FF33",
              lineWidth: "3",
            },
          },
          lineWidth: 0,
        },
        name: "Population 2016",
        joinBy:...