Highcharts: Custom area outline for line joining each marker - reactjs

Question

I'm trying to get a gradient color applied onto outline of an area series and the color depends on colors of both markers at the two ends, which'll be different for each line.
Used, highcharts multicolor_series module, for some reason it only draws and colors outline for 2 lines and doesn't draw/completes the last one. Here's my JSFiddle link: https://jsfiddle.net/pgkk/s29d51zt/872/
Can you please help me solve this, where am I going wrong? Thanks in advance.
"credits": {
"enabled": false
},
"chart": {
// backgroundColor: '#F5F7F7',
"polar": true,
"height": 190,
"width": 290,
"minWidth": 250,
"marginBottom": -25,
"style": {
"fontFamily": [
"WhitneyNarrBook",
"Roboto",
"Arial",
"sans-serif"
],
"fontWeight": 400,
"fontSize": 11,
"letterSpacing": "-0.06px",
"lineHeight": "16px"
}
},
"tooltip": {
"enabled": false
},
"title": {
"text": ""
},
"xAxis": {
"min": 0,
"gridZIndex": 4,
"gridLineColor": "#dce1e6",
"lineColor": "#dce1e6",
"categories": [
"Cat1",
"Cat2",
"Cat3"
],
"tickmarkPlacement": "on",
"lineWidth": 0,
"labels": {
"useHTML": true,
"align": "center",
"style": {
"whiteSpace": "nowrap",
"color": "#26415e",
"fontSize": "12px"
}
}
},
"yAxis": {
"gridLineInterpolation": "polygon",
"gridZIndex": 4,
"gridLineColor": "#dce1e6",
"lineColor": "#dce1e6",
"min": 0,
"max": 100,
"showFirstLabel": false,
"showLastLabel": true,
"tickInterval": 25,
"labels": {
"align": "center",
"y": 5,
"x": 0,
"style": {
"color": "#333333",
"fontSize": "10px"
}
}
},
"plotOptions": {
"series": {
"marker": {
"radius": 2.5
},
"states": {
"hover": {
"enabled": false
},
"inactive": {
"enabled": false
}
}
},
"area": {
"dataLabels": {
"enabled": false
}
}
},
"series": [{
"showInLegend": false,
"data": [
100,
100,
100
],
"color": {
"radialGradient": {
"cx": 0.5,
"cy": 0.7,
"r": 0.5
},
"stops": [
[
0,
"#DFA124"
],
[
0.55,
"#AF9D3F"
],
[
0.75,
"#5A9772"
],
[
1,
"#229595"
]
]
},
"pointPlacement": "on",
"marker": {
"symbol": "circle"
},
"fillOpacity": 0.5,
"type": "area",
"lineColor": "transparent"
},
{
"showInLegend": false,
"data": [{
"y": 33,
"color": "#AF9D3F"
},
{
"y": 65,
"color": "#229595"
},
{
"y": 28,
"color": "#DFA124"
}
],
zIndex: 5,
"pointPlacement": "on",
"type": "area",
//lineWidth: 5,
//lineColor: 'gray',
"color": "transparent",
"marker": {
"symbol": "circle"
}
},
{
"showInLegend": false,
"data": [
[
33,
100
],
[
65,
100
],
[
28,
100
]
],
"pointPlacement": "on",
"type": "arearange",
"fillColor": "white",
"opacity": 1,
"lineColor": "transparent",
"marker": {
"fillColor": "#dce1e6",
"lineColor": "#dce1e6"
}
},
{
type: 'coloredline',
showInLegend: false,
pointPlacement: "on",
data: [{
y: 33,
segmentColor: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
//[0, '#AF9D3F'], // start
[0.5, '#AF9D3F'], // middle
[1, '#229595'] // end
]
}
}, {
y: 65,
segmentColor: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
//[0, '#AF9D3F'], // start
[0.25, '#DFA124'],
[1, '#229595'] // middle
]
}
}, {
y: 28,
"segmentColor": {
"linearGradient": {
"x1": 0,
"x2": 0,
"y1": 0,
"y2": 1
},
"stops": [
[
0.5,
"#229595"
],
[
1,
"#DFA124"
]
]
}
},
]
}
]

Answer 1

For each outline you can add separate line series and with corresponding gradient and disabled marker.
Try fiddle link
{
"pointPlacement": "on",
"showInLegend": false,
data: [
[33],
[65],
[null]
],
type: 'line',
marker: {
enabled: false
},
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#AF9D3F'],
[1, '#229595']
]
}
}, {
"showInLegend": false,
"pointPlacement": "on",
data: [
[null],
[65],
[28],
],
type: 'line',
marker: {
enabled: false
},
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#AF9D3F'],
[1, '#229595']
]
}
}, {
"showInLegend": false,
"pointPlacement": "on",
data: [
[33],
[null],
[28],
],
type: 'line',
marker: {
enabled: false
},
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#AF9D3F'],
[1, '#AF9D3F']
]
}
}
https://jsfiddle.net/koushlendra/o5dujm0z/719/