Previously, I utilized the AmCharts flash version where creating clustered column/bar charts like the image below was a breeze. In that setup, the clustered bars were tightly packed with no spacing in between. However, transitioning to the JS version of AmChart has proven challenging.
Here is how it looks in the JS version:
https://i.sstatic.net/znIMF.jpg
I've attempted tweaking the configuration settings but have been unsuccessful in eliminating the space between the clustered bars.
Below is the code snippet for reference:
<!DOCTYPE html>
<html>
<head>
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "category",
"backgroundColor": "#00000",
"fontSize": 11,
"color":"#ffffff",
"startDuration": 1,
"categoryAxis": {
"autoRotateAngle": -7.2,
"gridPosition": "start",
"labelRotation": -90,
"titleRotation": 0
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"fillColors": "#ff0000",
"id": "AmGraph-1",
"title": "graph 1",
"title": "DIRECT",
"type": "column",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"fillColors": "#008000",
"id": "AmGraph-2",
"title": "graph 2",
"title": "TRANSIT",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"color": "#ffffff",
"position": "absolute",
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "DAILY REPORT OF TRAFFIC TYPE"
}
],
"dataProvider": [
{
"category": "2016-10-01",
"column-1": 22,
"column-2": 23
},
.
.
. //additional data entries omitted for brevity
{
"category": "2016-10-30",
"column-1": null,
"column-2": null
}
]
}
);
</script>
</head>
<body>
<syntax highlighting and CSS styling applied here>