<!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() {
//chart data
var data = [
{x: 'Registered Nurse', low: 20000, q1: 26000, median: 27000, q3: 32000, high: 38000, outliers: [50000, 52000]},
{x: 'Dental Hygienist', low: 24000, q1: 28000, median: 32000, q3: 38000, high: 42000, outliers: [48000]},
{x: 'Computer Systems Analyst', low: 40000, q1: 49000, median: 62000, q3: 73000, high: 88000, outliers: [32000, 29000, 106000]},
{x: 'Physical Therapist', low: 52000, q1: 59000, median: 65000, q3: 74000, high: 83000, outliers: [91000]},
{x: 'Software Developer', low: 45000, q1: 54000, median: 66000, q3: 81000, high: 97000, outliers: [120000]},
{x: 'Information Security Analyst', low: 47000, q1: 56000, median: 69000, q3: 85000, high: 100000, outliers: [110000, 115000, 32000]},
{x: 'Nurse Practitioner', low: 64000, q1: 74000, median: 83000, q3: 93000, high: 100000, outliers: [110000]},
{x: 'Physician Assistant', low: 67000, q1: 72000, median: 84000, q3: 95000, high: 110000, outliers: [57000, 54000]},
{x: 'Dentist', low: 75000, q1: 99000, median: 123000, q3: 160000, high: 210000, outliers: [220000, 70000]},
{x: 'Physician', low: 58000, q1: 96000, median: 130000, q3: 170000, high: 200000, outliers: [42000, 210000, 215000]}
];
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('Top 10 Jobs Salaries Grades Per Year Calisota, USA');
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().fontWeight('normal').fontFamily('Verdana').fontSize('14px');
chart.xAxis().staggerMode(true);
chart.xAxis().title().fontColor(colorAxis);
chart.yAxis().title(null);
chart.yAxis().title().fontWeight('normal').fontFamily('Verdana').fontSize('14px');
chart.yAxis().labels().fontColor(colorAxis).textFormatter(function(){return this['tickValue'] + ' $';});
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);
series.stemStroke('#474747');
series.whiskerStroke('#474747');
series.medianStroke('1 #474747');
series.outlierMarkers().stroke(null);
series.outlierMarkers().fill('#474747');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>