Gradient on sankey diagram - highcharts

Question

I have a little problem with gradient in sankey diagram.
My sankey diagram look like this
sankey diagram
I don't know how to set gradient to flow from first node to second node, etc. I'd like to create like this
sankey diagram
At this time I have done something like this
JSFiddle but this isn't what i want to.
My JS code include only sankeyChart class look like this
function sankeyChart() {
var sankey = Highcharts.chart('container', {
title: {
text: 'Sankey Diagram'
},
series: [{
keys: ['from', 'to', 'weight'],
data: [],
type: 'sankey',
name: ''
}],
plotOptions: {
series: {
colorByPoint: true
}
},
credits: {
enabled: false
}
});
function setData(data) {
sankey.series[0].update({
data: data,
}, true);
}
return {
'chart': sankey,
'setData': setData
}
}
I'll be grateful for any idea.

Answer 1

You can overwrite pointAttribs method and set the gradient in the way you want:
var H = Highcharts;
H.seriesTypes.sankey.prototype.pointAttribs = function(point, state) {
var opacity = this.options.linkOpacity,
color = point.color;
if (state) {
opacity = this.options.states[state].linkOpacity || opacity;
color = this.options.states[state].color || point.color;
}
return {
fill: point.isNode ?
color : {
linearGradient: {
x1: 0,
x2: 1,
y1: 0,
y2: 0
},
stops: [
[0, H.color(color).setOpacity(opacity).get()],
[1, H.color(point.toNode.color).setOpacity(opacity).get()]
]
}
};
}
Live demo: https://jsfiddle.net/BlackLabel/w3qgu497/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts