<!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>