JavaScript
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": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 0
},
"stops": [
[
0,
"rgb(35,190,250)"
],
[
1,
"rgb(51,223,188)"
]
]
},
{
"linearGradient": {
"x1": 0,
"y1": 0,
"x2": 1,
"y2": 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]
}]
});