<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Stacked 3D Column Chart</title>
  <link href="https://playground.anychart.com/gallery/src/3D_Column_Charts/Stacked_3D_Column_Chart/iframe" rel="canonical">
  <meta content="3D Chart,3D Column Chart,Animation,Bar Chart,Column Chart,Multi-Series Chart,Stacked Chart,Tooltip" name="keywords">
  <meta content="AnyChart - JavaScript Charts designed to be embedded and integrated" name="description">
  <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" rel="stylesheet" type="text/css">
  <style>html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}</style>
 </head>
 <body>
  <div id="container"></div>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-cartesian-3d.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script type="text/javascript">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();
});</script>
 </body>
</html>