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/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>


<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() {

  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function(data) {

    // Make codes uppercase to match the map data
    $.each(data, function() {
      this.code = this.code.toUpperCase();
    });

    // Instanciate the map
    $('#container').highcharts('Map', {

      chart: {
        borderWidth: 1,
        backgroundColor: "rgba(255,255,255,0)",
        plotBackgroundColor: "rgba(255,255,255,0)"
      },

      title: {
        text: 'US population density (/km²)'
      },

      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: "rgba(255,255,255,0)",
        align: "center",
        margin: 0,
        padding: 5
       
      },

      mapNavigation: {
        enabled: true
      },

      colorAxis: {
        labels: {
          style: {
            background: "rgba(255,255,255,0)",
            color: "#000000",
            //font-family: "Lucida Sans Unicode"
          }
        },
       
        minColor: "#FFFFFF",
        maxColor: "rgba(106,0,255,1)"
      },

      plotOptions: {
        series: {
         mapData: Highcharts.maps['countries/us/us-all'],
          borderColor: "rgba(192,192,192,1)",
          nullColor: "rgba(248,248,248,1)",
          showInLegend: true
        }
      },

      series: [{
        animation: {
          duration: 1000
        },
        color: "rgba(106,0,255,1)",
        data: data,
       
        joinBy: ['postal-code', 'code'],
        dataLabels: {
          enabled: true,
          color: '#FFFFFF',
          format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
          pointFormat: '{point.code}: {point.value}/km²'
        }
      }]
    });
  });
});