Highcharts - add border radius to boxplot chart - highcharts

Question

I am using Highcharts to show BoxPlot Chart.
Here is an example of this chart: http://jsfiddle.net/tLucL6mq/3/.
$('#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, 79, 82, 84, 89], //level 4 - category 0
['1', 53, 63, 68, 72, 75, 79], //level 3 - category 1
['2', 47, 52, 59, 64, 67, 68], //level 2 - category 2
['3', 35, 37, 39, 42, 46, 51], //level 1 - category 3
['4', 32, 33, 34, 38, 40, 45] //level 0 - category 4
],
tooltip: {
headerFormat: '<b>{point.series.name}</b><br/><em>Job Level: {point.x}</em><br/>',
pointFormat: '- Max: {point.high}<br/>' +
'- Q3: {point.q3}<br/>' +
'- Median: {point.median}<br/>' +
'- Q1: {point.q1}<br/>' +
'- Min: {point.low}<br/>'
}
}]
});
I want to add border radius, but I did not find this option.
I try to add it in a lot of positions. But no succees.
Any help?

Answer 1

Border radius is not supported by default in Highcharts boxplot series. The element, which you want to modify is a path, so it can not be done in a simple way.
However, by using Highcharts.SVGRenderer you can replace the path element by a rect with border radius, example:
events: {
render: function() {
var points = this.series[0].points,
pathBBox,
path;
Highcharts.each(points, function(p) {
path = p.graphic.element.children[2];
pathBBox = path.getBBox();
if (!p.additionalElement) {
p.additionalElement = this.renderer.rect(pathBBox.x + this.plotLeft, pathBBox.y + this.plotTop, pathBBox.width, pathBBox.height, 5)
.attr({
stroke: '#7cb5ec',
'stroke-width': 1,
zIndex: 4
})
.add();
} else {
p.additionalElement.attr({
x: pathBBox.x + this.plotLeft,
y: pathBBox.y + this.plotTop,
width: pathBBox.width,
height: pathBBox.height
});
}
path.setAttribute('stroke', 'transparent');
}, this);
}
}
Live demo: http://jsfiddle.net/BlackLabel/y9umo52w/

Answer 2

If this helps, you can also directly set the attribute 'd' of the current graphic.
function roundCornerBox(pathBBox: { x: number; y: number; width: number; height: number;}, radius: number) {
const { x, y, width, height } = pathBBox;
const eightPoints = [
{ x, y: y + radius },
{ x: x + radius, y },
{ x: x - radius + width, y },
{ x: x + width, y: y + radius },
{ x: x + width, y: y + height - radius },
{ x: x + width - radius, y: y + height },
{ x: x + radius, y: y + height },
{ x, y: y + height - radius }
];
const controlPoints = [
{ x, y },
{ x: x + width, y },
{ x: x + width, y: y + height },
{ x, y: y + height }
];
let controlPointIndex = 0,
lastCommand = 'Q',
controlPoint = controlPoints[0];
let d = '';
eightPoints.forEach((point, index) => {
if (index === 0) {
d += `M ${point.x} ${point.y} `;
return;
}
if (lastCommand === 'Q') {
controlPoint = controlPoints[controlPointIndex];
d += `${lastCommand} ${controlPoint.x} ${controlPoint.y} ${point.x} ${point.y}`;
lastCommand = 'L';
controlPointIndex++;
} else {
d += `${lastCommand} ${point.x} ${point.y} `;
lastCommand = 'Q';
}
});
d += 'z';
return d;
};
events: {
render: function() {
var points = this.series[0].points,
pathBBox,
path;
var radius = 5;
Highcharts.each(points, function(p) {
path = p.graphic.element.children[2];
pathBBox = path.getBBox();
path.setAttribute('d', roundCornerBox(pathBBox, radius));
}, this);
}
}