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: 113910,
      code: "BS",
    },
    {
      code3: "GBR",
      z: 100120,
      code: "GB",
    },
    {
      code3: "USA",
      z: 300000,
      code: "US",
    },
    {
      code3: "BRA",
      z: 450000,
      code: "BR",
    },
  ]

  const data2 = [
    {
      code3: "IND",
      z: 132471,
      code: "IN",
      lon: 77.993,
      lat: 24.108,
    },
    {
      code3: "AUS",
      z: 104911,
      code: "AU",
      lon: 134.342,
      lat: -23.92,
    },
  ]

  const data3 = [
    {
      code3: "ZAF",
      z: 132471,
      code: "ZA",
    },
  ]

  const data4 = [
    {
      code3: "ISL",
      z: 132471,
      code: "IS",
    },
  ]

  const mappointData1 = [
    // From data
    { name: "Bahamas", lat: 25.0343, lon: -77.3963 },
    { name: "United Kingdom", lat: 55.3781, lon: -3.436 },
    { name: "United States", lat: 37.0902, lon: -95.7129 },
    { name: "Brazil", lat: -14.235, lon: -51.9253 },
  ]

  // From data2 (already has lat/lon)
  const mappointData2 = [
    { name: "India", lat: 24.108, lon: 77.993 },
    { name: "Australia", lat: -23.92, lon: 134.342 },
  ]

  // From data3
  const mappointData3 = [{ name: "South Africa", lat: -30.5595, lon: 22.9375 }]

  // From data4
  const mappointData4 = [{ name: "Iceland", lat: 64.9631, lon: -19.0208 }]

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

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

    legend: {
      enabled: true,
    },

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

    tooltip: {
      shared: true,
      useHTML: true,
      formatter: function () {
  ...