Linear gradient in highcharts stockcharts according to full length date - vue.js

Question

Is there anywhere to make linear gradient on full date/year
https://jsfiddle.net/0712nw3g/64/
for example if i move/scroll the graph in 3 month zoom, color gradient should be the same as 1year/all
series: [{
type: 'line',
name: 'Volume',
id: 'stock',
data: volume,
yAxis: 0,
dataGrouping: {
units: groupingUnits
},
lineWidth: 10,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, '#26A69A'],
[1, '#CE1510']
]
},
}
]

Answer 1

You can set the options xAxis.events.afterSetExtremes to modify the color gradient in the graph but the color in the navigator also changes.
https://jsfiddle.net/BlackLabel/j3ca7oyh/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[1 - currentRange / dataRange, 'blue'],
[1, 'yellow']
]
},
})
}
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Another way will be adding a series inside the navigator and trying to calculate gradient color.
https://jsfiddle.net/BlackLabel/qLp61uft/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'red'],
[1, 'yellow']
]
},
})
}
}
},
navigator: {
series: {
name: 'AAPL',
data: data,
fillColor: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});