Question

I am trying to get a color gradient that looks like this: value 0 = green, value 20 = yellow, value 40 = red. So I am using a lineargradient with 2 or 3 stops, depending on if my actual data maximum exceeds 20 or not. This is the only way I could get the lineargradient to move through a HSL type color space. It works great. The problem is when I zoom, the lineargradient is reapplied to a potentially smaller scale. I want the yellow color to always be centered around a value of 20, with any possible zoom scenario. Now, when I zoom, the yellow may be centered around a much smaller value. Any idea how to accomplish this? Do I have to change the gradient every time a zoom happens? Here is the code:

  var data=env.client.data;
  var selected=env.client.selected;

  var max=_.max(data,function(slice){
    return(slice[1]);
  })[1];

  if(max>0){
    var stops=[
      [0,'hsla(120,50%,50%,0.5)']
    ];

    if(max>20){
      stops.push([20/max,'hsla(60,50%,50%,0.5)']);
      stops.push([1,'hsla('+Math.round(120-(120*(max/40)))+',50%,50%,0.5)']);
    }else{
      stops.push([1,'hsla('+Math.round(120-(60*(max/20)))+',50%,50%,0.5)']);
    }

    var chart=new Highcharts.Chart({
      chart:{
        height:250,
        renderTo:'chart',
        type:'areaspline',
        width:960,
        zoomType:'x'
      },
      legend:{
        enabled:false
      },
      plotOptions:{
        areaspline:{
          animation:false,
          fillColor:{
            linearGradient:{
              x1:0,
              y1:1,
              x2:0,
              y2:0
            },
            stops:stops
          },
          lineColor:'black',
          lineWidth:1,
          marker:{
            enabled:false,
            states:{
              hover:{
                enabled:true,
                radius:5
              }
            }
          },
          point:{
            events:{
              click:function(){
                var point=moment(this.x).utc();
                env.client.range.selected=point;
                $('#client-datetime').val(point.format('YYYY MMM DD, HH:mm'));
                _.publish('client date changed');
              }
            }
          },
          states:{
            hover:{
              lineWidth:1
            }
          }
        }
      },
      series:[{
        data:data,
        name:'Clients'
      }],
      title:{
        text:null
      },
      tooltip:{
        animation:false
      },
      xAxis:{
        maxZoom:12*60*60*1000,
        title:{
          text:null
        },
        type:'datetime'
      },
      yAxis:{
        max:max,
        min:0,
        minTickInterval:1,
        title:{
          text:null
        }
      }
    });
  }else{
    $('#chart').html('');
  }

Answer 1

Figured out the issue. Apparently if the data set is larger than 300 points, the zoomed view only uses the closest 300 points and redraws, which thus impacts the effect of the gradient. Fortunately, this size is adjustable via the cropThreshold parameter. I just set that to the size of my data set (2017), and it works great, though a little slower, since it is still rendering all the data points, but most of them may be outside the viewable area, which is inefficient, except it maintains my gradient.