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 Dug Sohn

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": "year",
	"rotate": false,
	"startDuration": 1,
	"categoryAxis": {
		"gridPosition": "start",
		"position": "left"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "Income:[[value]]",
			"fillAlphas": 0.8,
			"id": "AmGraph-1",
			"lineAlpha": 0.2,
			"title": "Income",
			"type": "column",
			"valueField": "income"
		},
		{
			"balloonText": "Expenses:[[value]]",
			"fillAlphas": 0.8,
			"id": "AmGraph-2",
			"lineAlpha": 0.2,
			"title": "Expenses",
			"type": "column",
			"valueField": "expenses"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"position": "top",
			"axisAlpha": 0
		}
	],
	"allLabels": [],
	"balloon": {},
	"titles": [],
	"dataProvider": [
		{
			"year": 2005,
			"income": 23.5,
			"expenses": 18.1
		},
		{
			"year": 2006,
			"income": 26.2,
			"expenses": 22.8
		},
		{
			"year": 2007,
			"income": 30.1,
			"expenses": 23.9
		},
		{
			"year": 2008,
			"income": 29.5,
			"expenses": 25.1
		},
		{
			"year": 2009,
			"income": 24.6,
			"expenses": 25
		}
	],
    "export": {
    	"enabled": true
     }

});