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([

    ['2012', 51, 125, 12],

    ['\'13', 91, 102, 14],

    ['\'14', 34, 90, 13],

    ['\'15', 47, 80, 21],

    ['\'16', 63, 103, 19]

  ]);

​

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

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

​

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

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

​

  // map data for the third series, take x from the zero area and value from the third area of data set

  var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });

​

  // create area chart

  var chart = anychart.area();

​

  // turn on chart animation

  chart.animation(true);

​

  // turn on the crosshair

  var crosshair = chart.crosshair();

  crosshair.enabled(true).yStroke(null).xStroke('#fff').zIndex(39);

  crosshair.yLabel().enabled(false);

​

  chart.yAxis().title('Amount of comments collected');

​

  // force chart to stack values by Y scale.

  chart.yScale().stackMode('value');

​

  // set chart title text settings

  chart.title('Customer satisfaction according to collected comments');

​

  // create first series with mapped data

  var firstSeries = chart.stepArea(firstSeriesData);

  firstSeries.name('Grateful');

  firstSeries.markers().zIndex(100);

  firstSeries

    .hovered()

    .markers()

    .type('circle')

    .size(4)

    .stroke('1.5 #fff');

​

  // create second series with mapped data

  var secondSeries = chart.stepArea(secondSeriesData);

  secondSeries.name('Neutral');

  secondSeries.markers().zIndex(100);

  secondSeries

    .hovered()

    .markers()

    .type('circle')

    .size(4)

    .stroke('1.5 #fff');

​

  // create third series with mapped data

  var thirdSeries = chart.stepArea(thirdSeriesData);

  thirdSeries.name('Disgruntled');

  thirdSeries.markers().zIndex(100);

  thirdSeries

    .hovered()

    .markers()

    .type('circle')

    .size(4)

    .stroke('1.5 #fff');

​

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

});