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