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

    var data = [

['AU.WA', 300],

['AU.JB', 230],

['AU.NS', 240],

['AU.VI', 275],

['AU.NT', 130],

['AU.TS', 190],

['AU.CT', 100],

['AU.SA', 305],

['AU.QL', 190]

    ];

​

    var stage = anychart.graphics.create("container");

​

    // create and display map

    var map = anychart.map();

    map.geoData(anychart.maps.australia);

    map.title('Australia Map');

    map.choropleth(data);

​

    map.bounds(0, 0, '100%', '70%');

    map.container(stage);    

    map.draw();

​

    // create and display chart

    var area = anychart.area();

    area.title('Spline Area Chart');

    area.splineArea(data);

​

    area.bounds(0, '70%', '100%', '30%');

    area.container(stage);    

    area.draw();

​

});