Column chart with confidence intervals
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"year": 2005,
"value": 11.5,
"error": 5
}, {
"year": 2006,
"value": 26.2,
"error": 5
}, {
"year": 2007,
"value": 30.1,
"error": 5
}, {
"year": 2008,
"value": 29.5,
"error": 7
}, {
"year": 2009,
"value": 20,
"error": 4
}],
"balloon": {
"textAlign": "left"
},
"valueAxes": [{
"id":"v1",
"axisAlpha": 0
}],
"startDuration": 1,
"graphs": [{
"balloonText": "value:<b>[[value]]</b><br>error:<b>[[error]]</b>",
"labelText": "[[value]]",
"type": "column",
"bullet": "yError",
"bulletColor": "#000",
"errorField": "error",
"lineThickness": 2,
"valueField": "value",
"bulletAxis": "v1",
"fillAlphas": 1
}],
"chartCursor": {
"cursorAlpha": 0,
"cursorPosition": "mouse",
"graphBulletSize": 1,
"zoomable": false
},
"categoryField": "year",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0
},
"exportConfig": {
"menuTop":"20px",
"menuRight":"20px",
"menuItems": [{
"icon": 'http://www.amcharts.com/lib/3/images/export.png',
"format": 'png'
}]
}
});