JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 400px; height: 00px; margin: 0 auto"></div>
JavaScript
$(function () {
(function (H) {
H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean'];
H.seriesTypes.boxplot.prototype.toYData = function (point) {
return [point.low, point.q1, point.median, point.q3, point.high, point.mean];
};
H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) {
p.call(this);
var chart = this.chart,
r = chart.renderer,
xAxis = this.xAxis,
yAxis = this.yAxis,
x, y;
H.each(this.points, function (p, i) {
x = p.shapeArgs.x;
y = p.meanPlot;
if (p.meanPlotX) {
p.meanPlotX.attr({
d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
});
} else {
p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
stroke: 'black',
'stroke-width': 2
}).add(p.series.group);
}
});
});
})(Highcharts)
$('#container').highcharts({
chart: {
type: 'boxplot',
inverted: true
},
title: {
text: 'Sample Base Salary Range'
},
legend: {
enabled: false
},
xAxis: {
categories: ['4', '3', '2', '1', '0'],
title: {
text: 'Job Level'
}
},
yAxis: {
title: {
text: 'Base Salary'
}
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianWidth: 3
}
},
series: [{
name: "Observation Data",
data: [
['0', 68, 75, 82, 84,...