Box and whisker chart - Multiple series + Common tooltip
HTML
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
JavaScript
$(function() {
(function(H) {
H.seriesType('eq-boxplot', 'boxplot', {
pointPadding: 0
}, {
pointArrayMap: ['low', 'q1', 'median', 'q3', 'high', 'width'], // array point configs are mapped to this
translate: function() {
H.seriesTypes.boxplot.prototype.translate.call(this);
H.each(this.points, function(point) {
var shapeArgs = point && point.shapeArgs;
if (shapeArgs && typeof point.width === 'number') {
shapeArgs.x += (shapeArgs.width - shapeArgs.width * point.width) / 2;
shapeArgs.width *= point.width;
}
});
}
});
})(Highcharts);
$('#container').highcharts('Chart', {
"chart": {
"zoomType": "xy",
},
"tooltip": {
"enabled": true,
"shared": false,
"useHTML": true,
formatter: function() {
var s = '<b>' + this.x + '</b>';
return s;
},
},
"xAxis": {
"title": {
"text": "World_data By UN continental",
"margin": 5
},
"categories": ["Caribbean", "Central America", "Northern America", "South America"],
"tickmarkPlacement": "on"
},
"yAxis": [{
"title": {
"text": "Population2017",
"margin": 5
},
}],
"series": [{
"zIndex": 0,
"type": "eq-boxplot",
"yAxis": 0,
"data": [{
"eQCategoryValue": "Caribbean",
"low": 5177,
"q1": 51538.75,
"median": 108861,
"q3": 679457.25,
"high": 1369125,
"width": 0.9
}, {
"eQCategoryValue": "Central America",
"low": 374681,
"q1": 4300382.5,
"median": 6297717,
"q3": 15001394,
"high": 16913503,
"width": 0.34615384615384615
}, {
"eQCategoryValue": "Northern America",
"low": 6320,
"q1": 31400,
"median": 61349,
"q3": 180541831,
"high": 324459463,
"width": 0.25384615384615383
...