<!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 data set on our data
var data = anychart.data.set([
['P1', 31.34, 14, 9],
['P2', 49.76, 8, 6],
['P3', 57.43, 8, 12],
['P4', 60.67, 7, 8],
['P5', 88.19, 10, 6],
['P6', 103.54, 8.3, 6],
['P7', 120.98, 9, 11],
['P8', 153.21, 16, 15],
['P9', 201.61, 10, 8],
['P10', 261.14, 13, 7]
]).mapAs({
x: [0],
value: [1],
valueLowerError: [2],
valueUpperError: [3]
});
//create line chart
chart = anychart.line();
//set container id for the chart
chart.container('container');
chart.background(null);
//set chart title text settings
chart.title()
.text('Line Chart with Errors')
.fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
// colors
var colorAxisLabels = '#929292';
var colorAxis = '#C8C8C8';
var colorAxisMinor = '#F2F2F2';
var colorSeriesStroke = '#60cae1';
//create line series with our data
var series = chart.line(data);
series.stroke(colorSeriesStroke);
// grid & axis settings
chart.grid(1).stroke(colorAxisMinor);
chart.yAxis().title().enabled(false);
chart.xAxis().title().enabled(false);
chart.xAxis().stroke(colorAxis);
chart.xAxis().ticks().stroke(colorAxisMinor);
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);
//set series default error value
series.error(8);
series.error().valueErrorStroke('1px #474747');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>