Clustered Bar Chart

Clustered bar chart is a chart when bars of a different graphs are placed next to each another, and not stacked one on another, so basically it's the most simple bar chart with two graphs in it. <h2>Bar chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our bar or column chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts. <h2>Hand-drawn style</h2> Click on CHALK theme above the chart - the bars will gain hand-drawn style, with non-straight lines. This is a very special feature of amCharts!

by Daniel Ha

HTML

<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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

CSS

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

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
	"type": "serial",
     "theme": "light",
	"categoryField": "eggnog",
	"rotate": false,
	"startDuration": 1,
    "legend": {
    "useGraphSettings": true
  },
	"categoryAxis": {
		"gridPosition": "start",
		"position": "left"
	},
	"trendLines": [],
	"graphs": [  
   {  
      "id":"AmGraph-1",
      "lineAlpha":0.2,
      "title":"CK14008",
      "labelText":"[[value]]",
      "valueField":"CK14008",
      "type":"column",
      "fillAlphas":0.8
   },
   {  
      "id":"AmGraph-2",
      "lineAlpha":0.2,
      "title":"N-2927",
      "labelText":"[[value]]",
      "valueField":"N-2927",
      "type":"column",
      "fillAlphas":0.8
   },
   {  
      "id":"AmGraph-",
      "lineAlpha":0.2,
      "title":"U-1",
      "labelText":"[[value]]",
      "valueField":"U-1",
      "type":"column",
      "fillAlphas":0.8
   },
   {  
      "id":"AmGraph-4",
      "lineAlpha":0.2,
      "title":"ZJ0503",
      "labelText":"[[value]]",
      "valueField":"ZJ0503",
      "type":"column",
      "fillAlphas":0.8
   }
],
	
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"position": "top",
			"axisAlpha": 0
		}
	],
	"allLabels": [],
	"balloon": {},
	"titles": [],
	"dataProvider": [
     {
      "CK14008":18,
      "ZJ0503":20,
      "eggnog":"M",
      "N-2927":20,
      "U-1":20
   },
   {
      "CK14008":1,
      "ZJ0503":1,
      "eggnog":"O",
      "N-2927":1,
      "U-1":1
   },
   {
      "CK14008":8,
      "ZJ0503":21,
      "eggnog":"T",
      "N-2927":40,
      "U-1":40
   },
   {
      "CK14008":18,
      "eggnog":"U",
   },
   {
      "ZJ0503":30,
      "eggnog":"V",
      "N-2927":15,
      "U-1":15
   },

   {
      "CK14008":1,
      "eggnog":"J",
   },
   {
      "CK14008":47,
      "ZJ0503":41,
      "eggnog":"K",
      "N-2927":48,
      "U-1":46
   },
	],
    "export": {
    	"enabled": true
     }

});