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/7.14.3/Maps/Map_Projections

    var dataSet = anychart.data.set([

['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]

    ]);

​

    // mapping the data to the chart

    var chartDataSet = dataSet.mapAs({x: [0], value: [1]});

    var mapDataSet = dataSet.mapAs({id: [0], value: [1]});

​

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

    var mapChart = anychart.map();

    mapChart.geoData(anychart.maps.australia);

    mapChart.container(stage);

    mapChart.title('Australia Map');

    // set the series

    var series = mapChart.choropleth(mapDataSet);

​

    // disable the labels

    series.labels(false);

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

    mapChart.draw();

​

    var areaChart = anychart.area();

    areaChart.container(stage);

    areaChart.title('Spline-Area Chart');

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

    areaChart.splineArea(chartDataSet);

    areaChart.draw();

​

    var yAreaScale = areaChart.yScale();

    yAreaScale.minimum(0);

    yAreaScale.maximum(350);

​

});