Highcharts arc with arrow - highcharts

Question

I am trying to come up with solution which will help me drawing arrow on the end of arc (drawn by chart.renderer.arc function). I have seen solution like this How to draw arrows on a line-chart with Highcharts? when you have series but in arc I do not have information about points (except last one).
Now I am trying to draw arrow depending on angle but that looks a bit miserable.
What I am trying to achieve:
arc with arrow
Code sample: https://jsfiddle.net/49hL72pw/1/
chart: {
polar: true,
events: {
load: function() {
var chart = this;
var center = [(chart.plotBox.width) / 2, (chart.plotBox.height) / 2];
var ren = chart.renderer;
var angle = 175;
var result = ren.arc(center[0] + chart.plotBox.x, center[1] + chart.plotBox.y, 50, 50, (Math.PI / 180) * (-90), (Math.PI / 180) * angle).attr({
fill: '#FCFFC5',
stroke: 'black',
'stroke-width': 1,
dashStyle: 'dash'
}).add();
var dValues = result.element.attributes.d.value.split(" ");
var kx = +dValues[9];//203.99829144870202;
var ky = +dValues[10];//280.94598600742796;
var leftArrowX = 7;
var leftArrowY = 5;
var rightArrowX = 5;
var rightArrowY = 10;
if(angle <= 270 && angle >= 250) {
leftArrowX = leftArrowX * -1;
leftArrowY = leftArrowY * -1;
rightArrowX = rightArrowX * -1;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 249 && angle >= 230) {
leftArrowX = (leftArrowX * -1) - 3;
leftArrowY = (leftArrowY * -1) + 5;
rightArrowX = (rightArrowX * -1) + 3;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 229 && angle >= 210) {
leftArrowX = (leftArrowX * -1) - 3;
leftArrowY = (leftArrowY * -1) + 5;
rightArrowX = (rightArrowX * -1) + 7;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 209 && angle >= 200) {
leftArrowX = (leftArrowX * -1) - 3;
leftArrowY = (leftArrowY * -1) + 8;
rightArrowX = (rightArrowX * -1) + 7;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 199 && angle >= 190) {
leftArrowX = (leftArrowX * -1) - 2;
leftArrowY = (leftArrowY * -1) + 10;
rightArrowX = (rightArrowX * -1) + 10;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 189 && angle >= 180) {
leftArrowX = (leftArrowX * -1) - 1;
leftArrowY = (leftArrowY * -1) + 14;
rightArrowX = (rightArrowX * -1) + 12;
//rightArrowY = rightArrowY * -1;
} else if(angle <= 179 && angle >= 170) {
leftArrowX = (leftArrowX * -1) + 1;
leftArrowY = (leftArrowY * -1) + 14;
rightArrowX = (rightArrowX * -1) + 12;
rightArrowY = (rightArrowY) + -2;
} else if(angle <= 89 && angle > 20) {
//leftArrowX = leftArrowX * -1;
//leftArrowY = leftArrowY * -1;
//rightArrowX = rightArrowX * -1;
rightArrowY = rightArrowY * -1;
} else if (angle <= 20 && angle >= -90) {
leftArrowX = leftArrowX * -1;
leftArrowY = leftArrowY * -1;
//rightArrowX = rightArrowX * -1;
rightArrowY = rightArrowY * -1;
}
ren.path([
'M', kx, ky,
'L', kx + leftArrowX, ky + leftArrowY,
'M', kx, ky,
'L', kx + rightArrowX, ky + rightArrowY,
'Z'
])
.attr({
'stroke-width': 1,
stroke: 'black'
})
.add();
}
}
}

Answer 1

Thanks Paweł but I managed to solve it myself (drawing basic arrow and then rotating it):
ren.path([
'M', kx, ky,
'L', kx - 6, ky - 6,
'M', kx, ky,
'L', kx - 6, ky + 6,
'Z'
]).attr({
transform: 'rotate(' + angle + ')',
'stroke-width': 1,
stroke: '#2ecafa'
}).css({
'transform-origin': kx + 'px' + ' ' + ky + 'px'
}).add();