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);

  // set chart title text settings

  chart.title('World\'s largest cities');

​

  // create area series with passed data

  chart.stick(getData());

​

  chart

    .credits()

    .enabled(true)

    .url(

      'https://en.wikipedia.org/wiki/List_of_cities_proper_by_population'

    )

    .text(

      'Data source: https://en.wikipedia.org/wiki/List_of_cities_proper_by_population'

    )

    .logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico');

​

  // set scale minimum

  chart.yScale().minimum(0).ticks({

    interval: 5

  });

​

  // tooltips position and interactivity settings

  chart

    .tooltip()

    .positionMode('point')

    .format('Population in 2016: {%Value}{groupsSeparator: } mln');

  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]

  ];

}