Customise Sankey Highcharts marker and link width - highcharts

Question

I am implementing a Sankey charts using Highcharts where I need to display each nodes in specific symbol. I want to implement marker symbol feature for my Sankey graph.
I tried using marker.symbol which is not working.
marker: {
symbol: 'triangle'
}
Is there a way to implement custom symbols for Sankey graph? Also is there a way where I can control the width of links between each nodes? All my nodes have same weight, hence I want a way to fix my width.

Answer 1

Highcharts does not provide options that will allow to modify the marker symbol and the link width for sankey chart type, so it is not possible by default.
Workaround
To modify the links width, set scale and translate attributes.
To change the markers, use Highcharts.SVGRenderer and replace default rects by triangles.
chart: {
height: 200,
events: {
load: function() {
var points = this.series[0].points,
fromNodeBBox,
toNodeBBox,
linkBBox;
points.forEach(function(p) {
fromNodeBBox = p.fromNode.graphic.getBBox();
toNodeBBox = p.toNode.graphic.getBBox();
this.renderer.symbol(
'triangle',
fromNodeBBox.x + this.plotLeft + 10,
fromNodeBBox.y + this.plotTop,
fromNodeBBox.width,
fromNodeBBox.height
).attr({
fill: p.fromNode.color
}).add();
this.renderer.symbol(
'triangle',
toNodeBBox.x + this.plotLeft - 10,
toNodeBBox.y + this.plotTop,
toNodeBBox.width,
toNodeBBox.height
).attr({
fill: p.toNode.color,
zIndex: 3
}).add();
linkBBox = p.graphic.getBBox();
p.graphic.attr({
transform: 'scale(1 0.5) translate(0 ' + (linkBBox.y + fromNodeBBox.height / 2) + ')'
});
p.fromNode.graphic.destroy();
p.toNode.graphic.destroy();
}, this);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/f4u03qvd/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#symbol