V3: Column 100% stacked
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript 1.7
var chart;
var chartData = [{
"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
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginLeft = 0;
chart.marginRight = 0;
chart.marginTop = 30;
chart.marginBottom = 40;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "100%"; // this line makes the chart 100% stacked
valueAxis.gridAlpha = 0;
valueAxis.axisAlpha = 0;
valueAxis.labelsEnabled = false;
chart.addValueAxis(valueAxis);
// GRAPHS
// first graph
var graph = new AmCharts.AmGraph();
graph.title = "Europe";
graph.labelText = "[[percents]]%";
graph.balloonText = "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>";
graph.valueField = "europe";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.lineColor = "#C72C95";
chart.addGraph(graph);
// second graph
graph = new AmCharts.AmGraph();
graph.title = "North America";
graph.labelText =...