Stacked Bar Chart

Technically, this chart is exactly the same as <a href="/demos/stacked-column-chart/">Stacked Column Chart</a> with a single property, <code>rotate</code> set to <code>true</code>. Our charts do rotate that easily! <h2>HTML in the tool-tip</h2> If you roll-over any column, you will see a nicely formatted text in the tool-tip. Our tool-tips allow any HTML text so you can format the text in any way you want, add images or other HTML elements.

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv3"></div>

CSS

#chartdiv3 {
  border: 1px solid red;
  width: 100%;
  height: 50px;
  font-size: 11px;
}

div.amcharts-main-div>div.amcharts-chart-div>a {
  display: none !important;
}

JavaScript

var graphs1 = [];
var json = [
  [{
    "year": 2003,
    "<20": 30,
    "20-30": 34,
    "30-40": 20,
    "40-50": 10
  }],
  [{
      "item": "<20",
      "<20": 30
    },
    {
      "item": "20-30",
      "20-30": 34
    }, {
      "item": "30-40",
      "30-40": 20
    }, {
      "item": "40-50",
      "40-50": 10
    }
  ]
];
var max = 0;
var data = json[1];
for (var i = 0; i < data.length; i++) {
  var str = data[i].item;
  console.log(str);
  max += data[i][str];
  graphs1.push({
    "balloonText": "<b>[[title]]</b><br><span style='font-size:10px'><b>[[value]]</b></span>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.3,
    "title": data[i].item,
    "type": "column",
    "color": "#000000",
    "valueField": data[i].item,
    "labelText": "[[title]]<br>[[value]]"
  });
  console.log(data[i][str]);
}

var chart = AmCharts.makeChart("chartdiv3", {
  "type": "serial",
  "theme": "light",
  "autoMarginOffset": 0,
  "marginTop": 10,
  "marginBottom": 0,
  "marginLeft": 0,
  "marginRight": 0,
  "dataProvider": json[0],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "autoGridCount": false,
    "maximum": max+1,
    "strictMinMax": true
  }],
  "graphs": graphs1,
  "rotate": true,
  "categoryField": "year",
  "categoryAxis": {
    "axisAlpha": 0,
    "gridAlpha": 0.1,
    "labelsEnabled": false,
    "gridPosition": "start",
    "position": "left"
  },
  "allLabels": [{
    "text": "Age spread",
    "bold": true,
    "x": "40%",
    "y": "-1",
    "size": 11,
    "rotation": 0,
    "width": "100%",
    "align": "left"
  }],
  "export": {
    "enabled": false
  }
});