<!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() {
var data = [
{x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16},
{x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22},
{x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26},
{x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28},
{x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30},
{x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24},
{x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24},
{x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16},
{x: 'Central Africa', low: 2, q1: 4, median: 9, q3: 12, high: 15},
{x: 'Southern Africa', low: 1, q1: 4, median: 8, q3: 11, high: 14}
];
var chart = anychart.box();
chart.background(null);
//set container id for the chart
chart.container('container');
//set chart title text settings
var colorTitle = '#929292';
var colorAxis = '#bebebe';
chart.title().text('Oceanic Airlines Delays December, 2014');
chart.title().hAlign('center').fontWeight('normal').fontColor(colorTitle).fontFamily('Verdana').fontSize('16px');
//set axes settings
chart.xAxis().stroke(colorAxis);
chart.xAxis().ticks().stroke(colorAxis);
chart.xAxis().title('Salary Grades');
chart.xAxis().title().text('Directions').fontWeight('normal').fontFamily('Verdana').fontSize('14px').fontColor(colorAxis);
chart.xAxis().staggerMode(true);
chart.yAxis().title().text('Delay in minutes').fontWeight('normal').fontFamily('Verdana').fontSize('14px');
chart.yAxis().labels().fontColor(colorAxis);
chart.yAxis().stroke(colorAxis);
chart.yAxis().ticks().stroke(colorAxis);
chart.yAxis().minorTicks().stroke(colorAxis);
chart.yAxis().labels().fontColor(colorTitle);
chart.xAxis().labels().fontColor(colorTitle);
chart.yAxis().title().fontColor(colorAxis);
chart.grid().stroke('#DEDEDE').oddFill(null).evenFill(null).zIndex(10.1);
chart.minorGrid().stroke('#ECECEC').zIndex(10);
//create box chart series with our data
var series = chart.box(data);
series.fill('#82BECA');
series.stroke(null);
//hide whisker
series.whiskerWidth(0);
series.hoverWhiskerWidth(0);
series.stemStroke('#474747');
series.medianStroke('2 #474747');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>