html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set

  var dataSet = anychart.data.set([

    ['Q2 2014', 17.982, 10.941, 9.835, 4.047, 2.841],

    ['Q3 2014', 17.574, 8.659, 6.23, 2.627, 2.242],

    ['Q4 2014', 19.75, 10.35, 6.292, 3.595, 2.136],

    ['Q1 2015', 30.6, 17.2, 16.1, 5.4, 5.2],

    ['Q2 2015', 21.316, 12.204, 16.823, 3.457, 4.21],

    ['Q3 2015', 20.209, 10.342, 13.23, 2.872, 2.959],

    ['Q4 2015', 21.773, 10.577, 12.518, 3.929, 2.704],

    ['Q1 2016', 29.3, 17.9, 18.4, 4.8, 5.4]

  ]);

​

  // 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 second series, take x from the zero area and value from the third area of data set

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

​

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

  var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

​

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

  var fifthSeriesData = dataSet.mapAs({ x: 0, value: 5 });

​

  // create bar 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);

​

  // force chart to stack values by Y scale.

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

​

  // set chart title text settings

  chart.title('Unaudited Apple Inc. Revenue by Operating Segments');

​

  // helper function to setup label settings for all series

  var setupSeriesLabels = function (series, name) {

    series

      .name(name)

      .stroke('3 #fff 1')

      .fill(function () {

        return this.sourceColor + ' 0.8';

      });

    series.hovered().stroke('3 #fff 1');

    series

      .hovered()

      .markers()

      .enabled(true)

      .type('circle')

      .size(4)

      .stroke('1.5 #fff');

    series.markers().zIndex(100);

  };

​

  // temp variable to store series instance

  var series;

​

  // create first series with mapped data

  series = chart.area(firstSeriesData);

  setupSeriesLabels(series, 'Americas');

​

  // create second series with mapped data

  series = chart.area(secondSeriesData);

  setupSeriesLabels(series, 'Europe');

​

  // create third series with mapped data

  series = chart.area(thirdSeriesData);

  setupSeriesLabels(series, 'Greater China');

​

  // create fourth series with mapped data

  series = chart.area(fourthSeriesData);

  setupSeriesLabels(series, 'Japan');

​

  // create fourth series with mapped data

  series = chart.area(fifthSeriesData);

  setupSeriesLabels(series, 'Rest of Asia Pacific');

​

  // turn on legend

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

​

  // set titles for axises

  chart.xAxis().title(false);

  chart.yAxis().title('Revenue (in Billons USD)');

​

  // interactivity and tooltip settings

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

  chart

    .tooltip()

    .valuePrefix('$')

    .valuePostfix(' bln.')

    .displayMode('union');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});