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 firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });

​

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

  var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });

​

  // create line chart

  var chart = anychart.line();

​

  // adding dollar symbols to yAxis labels

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

​

  // turn on chart animation

  chart.animation(true);

​

  // turn on the crosshair

  chart

    .crosshair()

    .enabled(true)

    .yLabel({ enabled: false })

    .yStroke(null)

    .xStroke('#cecece')

    .zIndex(99);

​

  chart

    .yAxis()

    .title('The Share Price')

    .labels({ padding: [5, 5, 0, 5] });

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

​

  // set chart title text settings

  chart.title(

    'The cost of ACME\'s shares\ncompared with their main competitor during month'

  );

​

  // create first series with mapped data

  var firstSeries = chart.spline(firstSeriesData);

  firstSeries.name('ACME Share Price');

  firstSeries.markers().zIndex(100);

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

​

  // create second series with mapped data

  var secondSeries = chart.spline(secondSeriesData);

  secondSeries.name('The Competitor\'s Share Price');

  secondSeries.markers().zIndex(100);

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

​

  // turn the legend on

  chart.legend().enabled(true).fontSize(13).padding([0, 0, 20, 0]);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});

​

function getData() {

  return [

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

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

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

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

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

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

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

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

    ['9/9', 31, 35],

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ['9/30', 40, 30],

    ['9/31', 45, 35]

  ];

}