<!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() {
//data for the chart
var data = anychart.data.set([
[101.8871544450521, -80.75603982433677, 68, 47, 110, 48],
[155.810951165855, 214.2723776474595, 81, 52, 56, 101],
[203.250035367906, 3.05145130679011, 72, 34, 90, 96],
[256.0341778919101, -120.86547581106424, 32, 36, 120, 103],
[408.9005448967218, 94.85958395153284, 68, 52, 123, 99],
[427.1872748956084, -203.48837719112635, 48, 102, 118, 94],
[790.1034905686975, 578.32297029346228, 38, 42, 48, 74],
[751.2865408137441, 489.1917199790478, 37, 29, 61, 58],
[846.9176428839564, 423.6071574948728, 54, 32, 61, 93],
[902.3598393574357, 560.46232794225216, 48.034, 52, 72, 98],
[901.4813169538975, 321.57294746488333, 28, 29, 130, 42],
[1023.732014581561, 224.7758020609617, 54, 23, 148, 94.6],
[1124.1393811926246, 508.05048871412873, 63, 42, 132, 108],
[1234.460888326168, -476.815727699548, 59, 71, 100.04, 18],
[1236.66775120794773, -235.65700424462557, 37, 26, 59.7, 58],
[1401.5943283513188, -123.7888190932572, 68, 29, 35, 28],
[1441.3984118625522, -223.1356431134045, 38, 29, 118, 44],
[1352.1733933240175, -497.88095516338944, 29.09, 27, 117, 91],
[1474.0087166205049, -475.06017890200019, 34, 39, 103, 34],
[1492.8169632852077, -268.41374530270696, 31, 49, 108.06, 52],
[1592.577681608498, -267.3424177132547, 28, 26, 122, 38],
[1590.6276988238096, -69.55818405747414, 61, 28, 121, 59],
[1620.9351842403412, -469.9934994727373, 63, 29.09, 111, 61.09],
[1810.7067560553551, -296.1982044093311, 59.08, 27.89, 119.76, 91]
]).mapAs({
x: [0],
value: [1],
xLowerError: [2],
xUpperError: [3],
valueLowerError: [4],
valueUpperError: [5]
});
//create scatter chart
var chart = anychart.marker();
//set container id for the chart
chart.container('container');
chart.background(null);
//set chart title text settings
chart.title()
.text('Marker Chart with Error')
.fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
// colors
var colorAxisLabels = '#929292';
var colorAxis = '#C8C8C8';
var colorAxisMinor = '#F2F2F2';
var colorSeriesFill = '#60cae1';
var colorSeriesStroke = '#438D9E';
// grid & axis settings
chart.grid(1).stroke(colorAxisMinor);
chart.grid(1).drawLastLine(false);
chart.yAxis().title().enabled(false);
chart.xAxis().title().enabled(false);
chart.xAxis().stroke(colorAxis);
chart.xAxis().minorTicks(null);
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);
//create marker series
var series = chart.marker(data);
series.stroke(colorSeriesStroke);
series.fill(colorSeriesFill);
//set series visual settings
series.size(4);
//default error values, if missing in data set
series.error().valueErrorStroke('1px #438D9E');
series.error().xErrorStroke('1px #438D9E');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>