<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
//create bar chart
chart = anychart.column();
chart.background(null);
//set container id for the chart
chart.container('container');
//set chart title text settings
chart.title()
.text('Column Chart with Errors')
.fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
// data for the chart
var data = anychart.data.set([
['P1', 239.14, 3, 7],
['P2', 223.61, 10, 4],
['P3', 220.21, 16, 15],
['P4', 204.98, 5.4, 11],
['P5', 201.54, 8.3, 6],
['P6', 193.19, 5, 6],
['P7', 190.67, 7, 8],
['P8', 189.43, 8, 12],
['P9', 188.76, 6, 6],
['P10', 175.34, 4, 3]
]).mapAs({
x: [0],
value: [1],
valueLowerError: [2],
valueUpperError: [3]
});
//create area series with data
var series = chart.column(data);
// colors
var colorAxisLabels = '#929292';
var colorAxis = '#C8C8C8';
var colorAxisMinor = '#F2F2F2';
var colorSeriesFill = '#E6D5BC';
var colorSeriesStroke = null;
// grid & axis settings
chart.grid(1).enabled(false);
chart.yAxis().title().enabled(false);
chart.xAxis().title().enabled(false);
chart.xAxis().stroke(colorAxis);
chart.xAxis().ticks(null);
chart.xAxis().labels().fontColor(colorAxisLabels);
chart.yAxis().minorTicks().stroke(colorAxisMinor);
chart.yAxis().stroke(colorAxis);
chart.yAxis().ticks().stroke(colorAxis);
chart.yAxis().labels().fontColor(colorAxisLabels);
chart.grid().stroke(colorAxis).oddFill(null).evenFill(null).zIndex(10.1);
chart.minorGrid().stroke(colorAxisMinor).zIndex(10);
chart.grid().drawLastLine(false);
// series settings
series.fill(colorSeriesFill);
series.stroke(colorSeriesStroke);
series.error().valueErrorStroke('2px #474747');
//set scale minimum
chart.yScale().minimum(0);
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>