Gradient example - changing data shifts gradient

spec.json

{
  "$schema":"https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 300,
  "padding": 20,
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },

  "config": {
    "background":"#112530",
    
    "title":{
      "color":"#FFFFFF"
    },
    "axis": {
      "labelColor":"#FFFFFF",
      "labelFontStyle":"bold"
    }
  },

  "signals": [
    {
      "name": "gradient",
      "update": "{\"x1\":1,\"y1\":0,\"x2\":1,\"y2\":1,\"gradient\":\"linear\",\"stops\":[{\"offset\":0,\"color\":\"#FA4D61\"},{\"offset\":0.25,\"color\":\"#FA4D61\"},{\"offset\":0.25,\"color\":\"grey\"},{\"offset\":0.75,\"color\":\"grey\"},{\"offset\":0.75,\"color\":\"#4DC7CE\"},{\"offset\":1,\"color\":\"#4DC7CE \"}]}"
    }
  ],
  
  "data":[
    {"name":"data","values":[
        {"x": 1593586800000, "y": 40, "rating": "good"},
        {"x": 1593673200000, "y": 75, "rating": "good"} ,
        {"x": 1593759600000, "y": 75, "rating": "good"},
        {"x": 1593846000000, "y": 101, "rating": "good"},
        {"x": 1593932400000, "y": 120, "rating": "good"},
        {"x": 1594018800000, "y": 75, "rating": "good"},
        {"x": 1594105200000, "y": 111, "rating": "bad"}
    ]},
    {
      "name": "Ranges",
      "values": [
        {
          "start": 60,
          "end": 100,
          "text": "Normal"
        }
      ]
    }
  ],
  "scales":[
    {
      "name":"x",
      "type":"time",
      "nice":"day",
      "domain":{"data":"data","field":"x"},
      "range":"width"
    },
    {
      "name":"y",
      "type":"linear",
      "nice":true,
      "zero":false,
      "domain":{"data":"data","field":"y"},
      "domainMax": 120,
      "domainMin": 40,
      "range":"height"
    },
    {
      "name":"legend",
      "type":"ordinal",
      "range":["Normal", "High/Low"]
    },
    {
      "name": "Ranges",
      "type": "ordinal",
      "domain": {"data": "Ranges", "field": "text"},
      "range": ["grey", "#FA4D61"]
    },
    {
      "name": "gradientRange",
      "type": "linear",
      "domain": [40, 120],
      "range": ["#4DC7CE", "#FA4D61"]
    }
  ],
  "axes":[
    {
      "scale":"x",
      "domain":false,
      "orient":"bottom",
      "offset":8,
      "formatType":"time",
      "format":"%a",
      "tickCount":"day",
      "ticks":false,
      "labelOverlap":true
      
    },
    {
      "scale":"y",
      "titleColor":"#FFFFFF",
      "domain":false,
      "orient":"left",
      "format":"d",
      "grid":true,
      "gridColor":"#FFFFFF",
      "gridCap":"round",
      "ticks":false,
      "tickColor":"#A0A8AC",
      "tickCount":5,
      "tickMinStep":1
      

    }
  ],
  "marks":[
    {
      "type": "rect",
      "from": {"data": "Ranges"},
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"signal": "width"},
          "y": {"scale": "y", "field": "start"},
          "y2": {"scale": "y", "field": "end"},
          "fill": {"scale": "Ranges", "field": "text"},
          "opacity": {"value": 0.5}
        }
      }
    },
    {
      "type":"line",
      "from":{"data":"data"},
      "encode":{
        "update":{
          "x":{"scale":"x","field":"x"},
          "y":{"scale":"y","field":"y"},
          "interpolate":{"value":"catmull-rom"},
          "stroke": {
              "signal": "gradient"
          },
          "strokeWidth":{"value":3}
        }
      }
    }
  ]
}