Using column chart to create background fills
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [{
"series": "1",
"value": 1114,
"color": "#0D52D1"
}, {
"series": "2",
"value": 984,
"color": "#CD0D74"
}, {
"series": "3",
"value": 711,
"color": "#CD0D74"
}, {
"series": "4",
"value": 665,
"color": "#0D52D1"
}, {
"series": "5",
"value": 580,
"color": "#CD0D74"
}, {
"series": "6",
"value": 443,
"color": "#CD0D74"
}, {
"series": "7",
"value": 441,
"color": "#CD0D74"
}];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "series";
chart.startDuration = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridAlpha = 0;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridPosition = "start";
// regular value axis
var valueAxis = new AmCharts.ValueAxis();
chart.addValueAxis(valueAxis);
// value axis used for fills
var valueAxisColumn = new AmCharts.ValueAxis();
valueAxisColumn.axisAlpha = 0;
valueAxisColumn.stackType = "100%";
valueAxisColumn.labelsEnabled = false;
valueAxisColumn.gridAlpha = 0;
valueAxisColumn.axisAlpha = 0;
chart.addValueAxis(valueAxisColumn);
// Collumns
var graph = new AmCharts.AmGraph();
graph.valueAxis = valueAxisColumn;
graph.valueField = "value";
graph.colorField = "color";
graph.type = "column";
graph.columnWidth = 1.01;
graph.lineAlpha = 0;
graph.fillAlphas = 1;
graph.showBalloon = false;
chart.addGraph(graph);
// regular graph
graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.lineThickness = 2;
graph.bullet = "round";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
...