html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create column chart

  var chart = anychart.column();

​

  // set chart title text settings

  chart.title(

    'Coastal Water Temperature \nin London vs Edinburgh in 2015 (\xb0C)'

  );

​

  // create area series with passed data

  var data = anychart.data.set(getData());

​

  var dataLon = data.mapAs({ high: 0, low: 1, x: 4 });

  chart.rangeColumn(dataLon).name('London');

​

  var dataEdi = data.mapAs({ high: 2, low: 3, x: 4 });

  chart.rangeColumn(dataEdi).name('Edinburgh');

​

  // set the max and min values on the axes

  chart.yScale().minimum(4).maximum(20);

​

  // enable legend

  chart.legend(true);

​

  // enable grid

  chart.yGrid(true).yMinorGrid(true);

​

  // set tooltip format

  chart.tooltip().titleFormat('{%SeriesName} ({%x})');

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

    [5.8, 7.9, 6.1, 8.9, 'Jan'],

    [4.6, 6.1, 5.5, 8.2, 'Feb'],

    [5.9, 8.1, 5.9, 8.1, 'Mar'],

    [7.8, 10.7, 7.1, 9.8, 'Apr'],

    [10.5, 13.7, 8.3, 10.7, 'May'],

    [13.8, 17, 10.7, 14.5, 'June'],

    [16.5, 18.5, 12.3, 16.7, 'July'],

    [17.8, 19, 14, 16.3, 'Aug'],

    [15.4, 17.8, 13.7, 15.3, 'Sep'],

    [12.7, 15.3, 12.3, 14.4, 'Oct'],

    [9.8, 13, 10.7, 12.9, 'Nov'],

    [9, 10.1, 8.2, 11.1, 'Dec']

  ];

}