Linear gradient in highcharts stockcharts according to full length date

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']
        ]
      },
    }]
  });
});