Highcharts: How to add an arrow to the end of a connector in a pie chart?
I would like to be able to add a dot at the tip of the connector to the highchart of the pie. (using Highcharts 5.0.10)
I found out that there are <marker>
svg elements (not to be confused with the highcharts marker
api) and they can be added either:
- through
css
- as an attribute of the element
<path>
.
I don't see a way to apply them though.
I tried to add a marker element during an event render
in highcharts and then change the connector element to add the attribute:
render: function() {
var marker = '<marker xmlns="http://www.w3.org/2000/svg" id="circle-marker" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto" viewBox="0 0 10 10">'+
'<circle cx="5" cy="5" r="3" style="stroke: none; fill: red;"/>' +
'</marker>';
if (!$('#circle-marker').length) {
$('defs').append(marker);
}
$('.highcharts-data-label-connector').attr('marker-end', 'url(#circle-marker)');
}
Also tried to create a style that points to this marker.
The harder part of the problem is that I want to make them dynamic (grab the color from the current point).
I may need my hands to be dirtier on SVG (I know practically nothing), but also think there is something in the Highcharts API that I am not seeing.
EDIT: This is all done inside the AngularJS directive.
source to share
You can use the svg Highcharts wrapper to create markers and attach them correctly to the load event. The problem with the marker - if you want them to have the same color as the connector, you need to create a separate marker for each - SVG 1.1 markers do not inherit color from the objects that refer to them (markers).
load: function () {
var renderer = this.renderer
this.series[0].points.forEach((point, i) => {
var marker = renderer.createElement('marker').add(renderer.defs).attr({
markerWidth: 10,
markerHeight: 10,
refX: 5,
refY: 5,
orient: 'auto',
id: `connector-marker-${i}`
})
renderer.circle(5, 5, 5).add(marker).attr({
fill: point.color
})
point.connector.attr({
'marker-start': `url(#connector-marker-${i})`
})
})
}
example: http://jsfiddle.net/39xvhwqo/
source to share