highchart's line chart with constant series not plotting when using linear gradient colour - highcharts

Question

Observe the series one in the below example having a constant value and for that series points connecting lines are not plotted, but when we give a solid colour then the line will be plotted.
Highchart's line chart with constant series not plotting the line b/w points when we use line gradient colour, but if you change that to solid colour then line will be plotting.
highcharts.series[].data = [2, 2, 2, ...];
highcharts.color[0] = {
linearGradient: {...},
stop: {...}
};
Check this example:
https://jsfiddle.net/4vk7cdmz/

Answer 1

This is because of the attribute gradientUnits in linearGradient which the default value is objectBoundingBox.
Keyword objectBoundingBox should not be used when the geometry of the
applicable element has no width or no height, such as the case of a
horizontal or vertical line, even when the line has actual thickness
when viewed due to having a non-zero stroke width since stroke width
is ignored for bounding box calculations. When the geometry of the
applicable element has no width or height and objectBoundingBox is
specified, then the given effect (e.g., a gradient or a filter) will
be ignored.
W3C Recommendation
You need to use gradientUnits="userSpaceOnUse".
Highcharts.js has fixed this issue in version 2.2.
Instead of using linearGradient as an object
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 0
}
, using it as an array
"linearGradient": [x1, y1, x2, y2],
will set gradientUnits to userSpaceOnUse in highcharts.js
(This requires knowledge of the line width.)
Here's a demo:
var Chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'a constant series line is not plotting when using linear gradient colour.'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
colors: [{
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(35,190,250)"],
[1, "rgb(51,223,188)"]
]
}, {
"linearGradient": [0, 0, 500, 0],
"stops": [
[0, "rgb(250,79,168)"],
[1, "rgb(156,120,229)"]
]
}],
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [2, 2, 2, 2, 2, 2, 2]
},
{
name: 'Jane',
data: [1, 1, 1, 1, 1, 1, 2]
}
]
});
#container {
width: 100%;
height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/highcharts.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.7/css/highcharts.css" />
<div id="container"></div>