Clustered multi-segment stacked column chart with sub-categories

by Rogério Saraceni

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv-evolution-apacs"></div>

CSS

#chartdiv-evolution-apacs {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv-evolution-apacs", {
        "type": "serial",
        "theme": "light",

        "titles": [
            {
                "text": "DC Evolution",
                "size": 12
            },            
            {
                "text": "APAC S",
                "size": 11
            },
        ],
            
        "balloon": {
            "adjustBorderColor": false,
            "horizontalPadding": 10,
            "verticalPadding": 5,
            "color": "#ffffff"
        },   
                    
        "dataProvider": [
            {
                "date": "DC Adelaide",
                "week1": 67,
                "week2": 65,
                "week3": 65,

                "Target": 63,
                "dashLengthLine": 5,

                "label": 0,
            }, 
        ],
        
        "valueAxes": [{
            "stackType": "regular",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "labelsEnabled": false,
            "position": "left",
            "title": ""
        }],
        
        "startDuration": 0.1,
        
        "graphs": [
             // week1
             {
                "fillAlphas": 0,
                "lineAlpha": 0,
                "title": "45",
                "type": "column",
                "valueField": "label",
                "showAllValueLabels": true,
                "labelText": "\n[[title]]"
             },
             {
                "fillColors": "#3498db",
                "fillAlphas": 0.9,
                "lineAlpha": 0.2,
                "title": "45",
                "type": "column",
                "valueField": "week1",
                "labelText": "[[week1]]%",
                "balloonText": "<span style='font-size:12px;'>[[value]]%</span>",
            }, 
        
            // week2
            {
                "newStack": true,
                "fillAlphas": 0,
                "lineAlpha": 0,
                "title": "46",
   ...