amCharts Clustered but not stacked - amcharts

Question

I am looking for how to build an amChart that is clustered but not stacked (layered). An example would be comparing month to month for the last 3 years. For each month I want to see sold vs shipped, year 1,2 and 3 clustered.
Specifically, using the below example, I need N America to be on top of or in the same cluster as Europe. Currently it is across all the clusters.
Code:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"legend": {
"horizontalGap": 10,
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [ {
"year": 2003,
"europe": 2.5,
"namerica": 1.5,
"asia": 2.1,
"lamerica": 1.2,
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 1.3,
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 1.4,
} ],
"valueAxes": [ {
"stackType": "regular",
"axisAlpha": 0,
"gridAlpha": 0
} ],
"graphs": [ {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"color": "#000000",
"valueField": "europe"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "N America",
"type": "column",
"color": "#000000",
"columnWidth":0.3,
"clustered":false,
"stackable": false,
"valueField": "namerica"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"newStack": true,
"color": "#000000",
"valueField": "asia"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "L America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
} ],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}});
I can get close here:
jsFiddle
I'm attempting to combine these two charts:
https://www.amcharts.com/demos/stacked-clustered-column-chart/
https://www.amcharts.com/demos/layered-column-chart/
Thanks!

Answer 1

The closest way you can achieve this while having the columns centered within the same cluster is to set the value axis' stackType: 3d and tweak the angle and depth3D to small values so that they'll line up:
AmCharts.makeChart("...", {
// ...
"depth3D": 0, //0 depth to remove the 3d effect and achieve layering.
"angle": 0, //0 angle to center the columns within the cluster. won't 100% center if depth3D is a non-zero value
"columnSpacing3D" : 0,
"columnSpacing": 20, //space the clusters out
// ...
"valueAxes": [ {
"stackType": "3d",
"axisAlpha": 0,
"gridAlpha": 0
} ],
// ...
});
All you have to do after that is fix the graph definitions to set the newStack: true property after every two graphs.
Demo:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"depth3D": 0, //0 depth to remove the 3d effect and achieve layering.
"angle": 0, //0 angle to center the columns within the cluster. won't 100% center if depth3D is a non-zero value
"columnSpacing3D" : 0,
"columnSpacing": 20, //space the clusters out
"legend": {
"horizontalGap": 10,
"useGraphSettings": true,
"markerSize": 10
},
"dataProvider": [ {
"year": 2003,
"europe": 2.5,
"namerica": 1.5,
"asia": 2.1,
"lamerica": 1.2,
}, {
"year": 2004,
"europe": 2.6,
"namerica": 2.7,
"asia": 2.2,
"lamerica": 1.3,
}, {
"year": 2005,
"europe": 2.8,
"namerica": 2.9,
"asia": 2.4,
"lamerica": 1.4,
} ],
"valueAxes": [ {
"stackType": "3d",
"axisAlpha": 0,
"gridAlpha": 0
} ],
"graphs": [ {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "Europe",
"type": "column",
"color": "#000000",
"valueField": "europe"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "N America",
"type": "column",
"color": "#000000",
"valueField": "namerica"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "Asia-Pacific",
"type": "column",
"color": "#000000",
"newStack": true,
"valueField": "asia"
}, {
"fillAlphas": 0.8,
"labelText": "[[title]]",
"lineAlpha": 0.3,
"title": "L America",
"type": "column",
"color": "#000000",
"valueField": "lamerica"
} ],
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
} );
#chartdiv {
width: 100%;
height: 500px;
}
<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/themes/none.js"></script>
<div id="chartdiv"></div>