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

    ['Espresso', 1, null, null, null, null, null],

    ['Doppio', 2, null, null, null, null, null],

    ['Trippio', 3, null, null, null, null, null],

    ['Americano', 1, 3, null, null, null, null],

    ['Cappuchino', 1, null, 1, 2, null, null],

    ['Macchiato', 2.5, null, null, 1, null, null],

    ['Latte', 1, null, 2, 1, null, null],

    ['Latte Macchiato', 1, null, 2, null, 1, null],

    ['Vienna Coffee', 1, null, null, null, 2, null],

    ['Mocco', 1, null, 1, null, 1, 1]

  ]);

​

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

  var espresso = 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 water = dataSet.mapAs({ x: 0, value: 2 });

​

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

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

​

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

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

​

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

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

​

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

  var chocolate = dataSet.mapAs({ x: 0, value: 6 });

​

  // create bar chart

  var chart = anychart.column3d();

​

  // force chart to stack values by Y scale.

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

​

  // turn on chart animation

  chart.animation(true);

​

  // set chart title text settings

  chart.title('Types of Coffee');

  chart.title().padding([0, 0, 15, 0]);

​

  // helper function to setup label settings for all series

  var setupSeriesLabels = function (series, name, color) {

    series.name(name).fill(color).stroke('1 #f7f3f3 1');

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

  };

​

  // temp variable to store series instance

  var series;

​

  // create first series with mapped data

  series = chart.column(espresso);

  setupSeriesLabels(series, 'Espresso', '#3e2723');

​

  // create second series with mapped data

  series = chart.column(water);

  setupSeriesLabels(series, 'Water', '#64b5f6');

​

  // create third series with mapped data

  series = chart.column(milk);

  setupSeriesLabels(series, 'Milk', '#fff3e0');

​

  // create fourth series with mapped data

  series = chart.column(steamedMilk);

  setupSeriesLabels(series, 'Steamed milk', '#bcaaa4');

​

  // create fifth series with mapped data

  series = chart.column(cream);

  setupSeriesLabels(series, 'Cream', '#e6c1b5');

​

  // create sixth series with mapped data

  series = chart.column(chocolate);

  setupSeriesLabels(series, 'Chocolate', '#bf360c');

​

  // turn on legend

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

​

  // set yAxis labels formatter

  chart.yScale().ticks([0, 1, 2, 3, 4, 5]);

  chart.xAxis().stroke('#a18b7e');

  chart.xAxis().labels().fontColor('#a18b7e');

  chart.yAxis().stroke('#a18b7e');

  chart

    .yAxis()

    .labels()

    .fontColor('#a18b7e')

    .format('{%Value}{groupsSeparator: }');

​

  // set titles for axises

  chart

    .yAxis()

    .title()

    .enabled(true)

    .text('Portions of Ingredients')

    .fontColor('#a18b7e');

​

  // set interactivity settings

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

​

  // set tooltip settings

  chart.tooltip().displayMode('union').format('{%Value} {%SeriesName}');

​

  // set grid settings

  chart.yGrid().stroke('#a18b7e');

  chart.xGrid().stroke('#a18b7e');

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});