html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    //create column chart

    var chart = anychart.column();

    //turn on chart animation

    chart.animation(true);

​

    //create area series with passed data

    var series = chart.stick(getData());

    //set series tooltip settings

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

        return 'Population in 2016: ' + this.value.toLocaleString() + ' mln'

    });

​

    //set scale minimum

    chart.yScale().minimum(0).ticks().interval(5);

    //tooltips position and interactivity settings

    chart.tooltip().positionMode('point');

    chart.interactivity().hoverMode('by-x');

    //axes titles

    chart.yAxis().title('Population (millions)');

    chart.xAxis().labels().rotation(-90);

    //set container id for the chart

    chart.container('container');

    //initiate chart drawing

    chart.draw();

});

​

function getData() {

    return [

        ['Shanghai', 24.2],

        ['Karachi', 23.5],

        ['Beijing', 21.5],

        ['Delhi', 16.7],

        ['Lagos', 16.0],

        ['Tianjin', 15.2],

        ['Istanbul', 14.1],

        ['Tokyo', 13.5],

        ['Guangzhou', 13],

        ['Mumbai', 12.4],

        ['Moscow', 12.1],

        ['S?o Paulo', 11.8],

        ['Shenzhen', 10.4],

        ['Jakarta', 10.1],

        ['Lahore', 10],

        ['Seoul', 9.9],

        ['Wuhan', 9.7],

        ['Kinshasa', 9.7],

        ['Cairo', 9.2],

        ['Mexico City', 8.8]

    ]

}