Vega, How to draw 2 Threshold/Limit lines

Elastic Stack Kibana
2

UPDATE
I manged to create this visualization with some sample data:

image
image952×622 32.4 KB

Code 
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "The PM2.5 value of Beijing observed 15 days, highlighting the days when PM2.5 level is hazardous to human health. Data source https://chartaccent.github.io/chartaccent.html",
    "layer": [{
      "data": {
        "values": [
          {"Day": 1, "Value": 54.8},
          {"Day": 2, "Value": 112.1},
          {"Day": 3, "Value": 63.6},
          {"Day": 4, "Value": 37.6},
          {"Day": 5, "Value": 79.7},
          {"Day": 6, "Value": 137.9},
          {"Day": 7, "Value": 120.1},
          {"Day": 8, "Value": 103.3},
          {"Day": 9, "Value": 394.8},
          {"Day": 10, "Value": 199.5},
          {"Day": 11, "Value": 72.3},
          {"Day": 12, "Value": 51.1},
          {"Day": 13, "Value": 112.0},
          {"Day": 14, "Value": 174.5},
          {"Day": 15, "Value": 130.5},
          {"limithigh":20, "limitlow":10}
        ]
      },
      "layer": [{
        "mark": "line",
        "encoding": {
          "x": {"field": "Day", "type": "ordinal", "axis": {"labelAngle": 0}},
          "y": {"field": "Value", "type": "quantitative"}
        }
      }, 
      {
        "mark": "line",
        "transform": [
          {"filter": "datum.Value >= 200"},
          {"calculate": "200", "as": "baseline"}
        ],
        "encoding": {
          "x": {"field": "Day", "type": "ordinal"},
          "y": {"field": "baseline", "type": "quantitative", "title": "PM2.5 Value"},
          "y2": {"field": "Value"},
          "color": {"value": "#FF0000"}
        }
      },
      {
        "mark": "line",
        "transform": [
          {"filter": "datum.Value <= 100"},
          {"calculate": "100", "as": "baseline"}
        ],
        "encoding": {
          "x": {"field": "Day", "type": "ordinal"},
          "y": {"field": "baseline", "type": "quantitative", "title": "PM2.5 Value"},
          "y2": {"field": "Value"},
          "color": {"value": "#FF0000"}
        }
      }
    ]}, {
      "data": {
         "values": [{}]
      },
      "encoding": {
        "y": {"datum": 100},
        "stroke": {"value": "#FF0000"} 
      },
      "layer": [{
        "mark": "rule"
      }, {
        "mark": {
          "type": "text",
          "align": "right",
          "baseline": "bottom",
          "dx": -2,
          "dy": -2,
          "x": "width",
          "text": "limitlow"
        }
      }]
    },
    {
      "data": {
         "values": [{}]
      },
      "encoding": {
        "y": {"datum": 200},
        "stroke": {"value": "#FF0000"} 
      },
      "layer": [{
        "mark": "rule"
      }, {
        "mark": {
          "type": "text",
          "align": "right",
          "baseline": "bottom",
          "dx": -2,
          "dy": -2,
          "x": "width",
          "text": "limithigh"
        }
      }]
    }
  ]
}

Problems:
This only works in the Vega Editor. The exact same script looks terrible in kibana:

image
image2604×1181 132 KB

Questions:
Why does Kibana display something so different?
How can I change this script so that it runs on elastic data?
How can I change limithigh and limitlow according to a document field in elastic?