[Vuejs]-Linear gradient in highcharts stockcharts according to full length date

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