html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

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

​

  // map data for the first series, take x from the zero column and value from the first column of data set

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

​

  // create vertical area chart

  var chart = anychart.verticalArea();

​

  // set chart padding

  chart.padding().right(20);

​

  // turn on chart animation

  chart.animation(true);

​

  // adding dollar symbols to yAxis labels

  chart.yAxis().labels().format('${%Value}');

​

  // axes settings

  chart.yAxis().title('Price');

  chart.xAxis().title('Date');

​

  // set chart title text settings

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .padding([0, 0, 20, 0])

    .text(

      'ACME Share Price<br/>' +

      '<span style="color:#212121; font-size: 13px;">September 2015</span>'

    );

​

  // create a series with mapped data

  var series = chart.area(seriesData);

  series

    .name('ACME Share Price')

    // turn on series markers

    .markers(true);

  series.hovered().markers().enabled(true).type('circle').size(4);

​

  // set chart tooltip and interactivity settings

  chart

    .tooltip()

    .position('right')

    .anchor('left-center')

    .positionMode('point');

​

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

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

    ['2015/9/01', 10],

    ['2015/9/02', 12],

    ['2015/9/03', 11],

    ['2015/9/04', 15],

    ['2015/9/05', 20],

    ['2015/9/06', 22],

    ['2015/9/07', 21],

    ['2015/9/08', 25],

    ['2015/9/09', 31],

    ['2015/9/10', 32],

    ['2015/9/11', 28],

    ['2015/9/12', 29],

    ['2015/9/13', 40],

    ['2015/9/14', 41],

    ['2015/9/15', 45],

    ['2015/9/16', 50],

    ['2015/9/17', 65],

    ['2015/9/18', 45],

    ['2015/9/19', 50],

    ['2015/9/20', 51],

    ['2015/9/21', 65],

    ['2015/9/22', 60],

    ['2015/9/23', 62],

    ['2015/9/24', 65],

    ['2015/9/25', 45],

    ['2015/9/26', 55],

    ['2015/9/27', 59],

    ['2015/9/28', 52],

    ['2015/9/29', 53],

    ['2015/9/30', 40]

  ];

}