html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // This sample uses 3rd party proj4 component

    // that makes it possible to set coordinates

    // for the points and labels on the map and

    // required for custom projections and grid labels formatting.

    // See https://docs.anychart.com/Maps/Map_Projections

​

    mapData = [

        {'id': 'AU.WA', 'capital': 'Perth', 'population': 1507949},

        {'id': 'AU.JB', 'capital': 'Canberra', 'population': 377},

        {'id': 'AU.NS', 'capital': 'Sydney', 'population': 4293105},

        {'id': 'AU.VI', 'capital': 'Melbourne', 'population': 3800000},

        {'id': 'AU.NT', 'capital': 'Darwin', 'population': 113955},

        {'id': 'AU.TS', 'capital': 'Hobart', 'population': 205510},

        {'id': 'AU.CT', 'capital': 'Canberra', 'population': 374766},

        {'id': 'AU.SA', 'capital': 'Adelaide', 'population': 1138833},

        {'id': 'AU.QL', 'capital': 'Brisbane', 'population': 1820375}

    ];

​

    var map = anychart.map();

    map.geoData(anychart.maps.australia);

    map.title("Move mouse over the map to see tooltip");

    // set the series

    var series = map.choropleth(mapData);

    //enable the tooltips and format them at once

    series.tooltip().format(function(e){

       return "Capital: " + e.getData("capital") +"\n"+

       "Population: " + e.getData("population")

    });

    // disable the labels

    series.labels(false);

    // draw map

    map.container("container");

    map.draw();

});