100% Stacked Column Chart
You might noticed that data labels of smallest columns are not displayed. This is done automatically – chart checks if there is enough space for the label and does not display it if it’s not.
Hiding graphs with a legend
The legend of the chart has a build-in feature (you can disable it, of course), which allows hiding graphs. Simply click on any legend entry and the chart will be redrawn, but without the graph you just clicked on. This is especially handy feature if you have a lot of graphs on your chart. To show this graph again, just click on the marker one more time.
Demo source
<!-- Styles -->
<style>
#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}
</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",
"legend": {
"autoMargins": false,
"borderAlpha": 0.2,
"equalWidths": false,
"horizontalGap": 10,
"markerSize": 10,
"useGraphSettings": true,
"valueAlign": "left",
"valueWidth": 0
},
"dataProvider": [{
"year": "2003",
"europe": 2.5,
"namerica": 2.5,
"asia": 2.1,
"lamerica": 0.3,
"meast": 0.2,
"africa": 0.1
}, {
"year": "2004",
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}, {
"year": "2005",
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 0.3,
"meast": 0.3,
"africa": 0.1
}],
"valueAxes": [{
"stackType": "100%",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"position": "left"
}],
"graphs": [{
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Europe",
"type": "column",
"valueField": "europe"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "North America",
"type": "column",
"valueField": "namerica"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Asia-Pacific",
"type": "column",
"valueField": "asia"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Latin America",
"type": "column",
"valueField": "lamerica"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Middle-East",
"type": "column",
"valueField": "meast"
}, {
"balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
"fillAlphas": 0.9,
"fontSize": 11,
"labelText": "[[percents]]%",
"lineAlpha": 0.5,
"title": "Africa",
"type": "column",
"valueField": "africa"
}],
"marginTop": 30,
"marginRight": 0,
"marginLeft": 0,
"marginBottom": 40,
"autoMargins": false,
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0
},
"export": {
"enabled": true
}
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>