• Open in:

Stacked bar chart with negative values

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}								
</style>

<!-- Resources -->
<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" />

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "none",
  "rotate": true,
  "marginBottom": 50,
  "dataProvider": [{
    "age": "85+",
    "male": -0.1,
    "female": 0.3
  }, {
    "age": "80-54",
    "male": -0.2,
    "female": 0.3
  }, {
    "age": "75-79",
    "male": -0.3,
    "female": 0.6
  }, {
    "age": "70-74",
    "male": -0.5,
    "female": 0.8
  }, {
    "age": "65-69",
    "male": -0.8,
    "female": 1.0
  }, {
    "age": "60-64",
    "male": -1.1,
    "female": 1.3
  }, {
    "age": "55-59",
    "male": -1.7,
    "female": 1.9
  }, {
    "age": "50-54",
    "male": -2.2,
    "female": 2.5
  }, {
    "age": "45-49",
    "male": -2.8,
    "female": 3.0
  }, {
    "age": "40-44",
    "male": -3.4,
    "female": 3.6
  }, {
    "age": "35-39",
    "male": -4.2,
    "female": 4.1
  }, {
    "age": "30-34",
    "male": -5.2,
    "female": 4.8
  }, {
    "age": "25-29",
    "male": -5.6,
    "female": 5.1
  }, {
    "age": "20-24",
    "male": -5.1,
    "female": 5.1
  }, {
    "age": "15-19",
    "male": -3.8,
    "female": 3.8
  }, {
    "age": "10-14",
    "male": -3.2,
    "female": 3.4
  }, {
    "age": "5-9",
    "male": -4.4,
    "female": 4.1
  }, {
    "age": "0-4",
    "male": -5.0,
    "female": 4.8
  }],
  "startDuration": 1,
  "graphs": [{
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "male",
    "title": "Male",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }, {
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "female",
    "title": "Female",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }],
  "categoryField": "age",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0.2,
    "axisAlpha": 0
  },
  "valueAxes": [{
    "gridAlpha": 0,
    "ignoreAxisWidth": true,
    "labelFunction": function(value) {
      return Math.abs(value) + '%';
    },
    "guides": [{
      "value": 0,
      "lineAlpha": 0.2
    }]
  }],
  "balloon": {
    "fixedPosition": true
  },
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0.05,
    "fullWidth": true
  },
  "allLabels": [{
    "text": "Male",
    "x": "28%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }, {
    "text": "Female",
    "x": "75%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }],
 "export": {
    "enabled": true
  }

});
</script>

<!-- HTML -->
<div id="chartdiv"></div>