I was trying to modify solution from there http://jsfiddle.net/BlackLabel/vd2Ly9eh/ in the way, that jquery won’t be used but I haven’t succeed. Also I tried to use highcharts-rounded-corners plugin, but my angular app doesn’t have opportunity to parse import of js files (it needs file with d.ts extension).
JQuery:
$(function() {
Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function(proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
var series = this,
cpw = 0.166,
shapeArgs,
x, y, h, w;
Highcharts.each(series.points, function(point) {
shapeArgs = point.shapeArgs;
x = shapeArgs.x;
y = shapeArgs.y;
h = shapeArgs.height;
w = shapeArgs.width;
point.shapeType = 'path';
if (point.negative) {
point.shapeArgs = {
d: [
'M', x, y,
'L', x, y + h - w / 2,
'C', x, y + h + w / 5, x + w, y + h + w / 5, x + w, y + h - w / 2, 'L', x + w, y,
'L', x, y
]
};
} else {
point.shapeArgs = {
d: [
'M', x, y + w / 2,
'L', x, y + h,
'L', x + w, y + h,
'L', x + w, y + w / 2,
'C', x + w, y - w / 5, x, y - w / 5, x, y + w / 2
]
};
}
});
});
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
data: [2, 3, -2, 3, 2]
}]
});
});
My variant (https://jsfiddle.net/7u4vjre0/12/):
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function () {
const chart = this;
chart.series.forEach((item, itemIndex) => {
item.points.forEach((point, pointIndex) => {
const {x, y, height, width} = point.shapeArgs;
this.series[itemIndex].points[pointIndex].shapeType = "path";
if (point.negative) {
this.series[itemIndex].points[pointIndex].shapeArgs = {
d: [
"M",
x,
y,
"L",
x,
y + height - width / 2,
"C",
x,
y + height + width / 5,
x + width,
y + height + width / 5,
x + width,
y + height - width / 2,
"L",
x + width,
y,
"L",
x,
y,
],
};
} else {
this.series[itemIndex].points[pointIndex].shapeArgs = {
d: [
"M",
x,
y + width / 2,
"L",
x,
y + height,
"L",
x + width,
y + height,
"L",
x + width,
y + width / 2,
"C",
x + width,
y - width / 5,
x,
y - width / 5,
x,
y + width / 2,
],
};
}
});
});
},
},
},
title: {
text: '',
},
xAxis: {
categories: ['Arsenal', 'Chelsea', 'Liverpool']
},
yAxis: {
min: 0,
title: {
text: ''
},
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Test 1',
data: [3, 5, 1]
}, {
name: 'Test 2',
data: [14, 8, 8]
}, {
name: 'Test 3',
data: [0, 2, 6]
}]
});
