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 line chart

  var chart = anychart.area3d();

​

  // adding dollar symbols to yAxis labels

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

​

  // turn on chart animation

  chart.animation(true);

​

  // set chat axes settings

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

  chart.xAxis().title('Year/Month/Day');

  chart.xAxis().labels().padding([5, 5, 0, 5]);

​

  // set chart title text settings

  chart

    .title()

    .enabled(true)

    .useHtml(true)

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

    .text(

      'The cost of ACME\'s shares<br/>' +

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

      'Statistics was collected from site N during September' +

      '</span>'

    );

​

  // create first series with mapped data

  var series = chart.area(seriesData);

  series.name('ACME Share Price');

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

​

  // set chart tooltip settings

  chart

    .tooltip()

    .position('center-top')

    .positionMode('point')

    .anchor('left-bottom')

    .offsetX(5)

    .offsetY(5);

​

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

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

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

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

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

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

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

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

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

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

    ['2015/9/9', 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],

    ['2015/9/31', 45]

  ];

}