'VEGA-lite chart - combined Area and line chart

I trying to make chart who is combine area and line chart. I have Problem with line chart, which are painted only his part. Maybe is problem in the code, or the input data are incorrect. I try some combinations, but not with successfully output.. See attached files. My code below. Thanks for your helpVega editor; expected output

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Machine",
  "width":1000,
  "height":40,
  "config": {
    "legend": {"orient": "bottom", "layout": {"bottom": {"anchor": "middle"}},"title": null, "labelFontSize":15, "symbolType":"square"}
  },
  "data": {
    "values": [
        {"time": "2022-01-27T05:00:43.674Z", "y":1 , "od":0,  "stav":"produkce", "textik": "Havelka"},
        {"time": "2022-01-27T07:32:13.671Z", "y": 0, "od":0,  "stav":"produkce", "textik": ""},
        {"time": "2022-01-27T10:41:13.671Z", "y": 1, "od":0,  "stav":"produkce", "textik": ""},
        {"time": "2022-01-27T12:32:13.671Z", "y": 0, "od":0,  "stav":"produkce", "textik": ""},
                
        {"time": "2022-01-27T07:32:13.671Z", "y": 1, "od":0,  "stav":"error", "textik": "Pavlik"},
        {"time": "2022-01-27T09:32:13.671Z", "y": 0, "od":0,  "stav":"error", "textik": ""},
        {"time": "2022-01-27T09:52:13.671Z", "y": 1, "od":0,  "stav":"error", "textik": "Pavlik"},
        {"time": "2022-01-27T10:41:13.671Z", "y": 0, "od":0,  "stav":"error", "textik": ""},

        {"time": "2022-01-27T09:32:13.671Z", "y": 1, "od":0, "stav":"nastaveni", "textik": ""},
        {"time": "2022-01-27T09:52:13.671Z", "y": 0, "od":0,  "stav":"nastaveni", "textik": ""},

        {"time": "2022-01-27T10:32:13.671Z", "y": 1.2, "od":1,"stav":"prestavka", "textik": ""},
        {"time": "2022-01-27T10:52:13.671Z", "y": 0, "od":0, "stav":"prestavka", "textik": ""},

        {"time": "2022-01-27T05:05:43.674Z", "y": 1.2, "od":1,"stav":"prestavka", "textik": ""},
        {"time": "2022-01-27T06:05:43.674Z", "y": 0, "od":0, "stav":"prestavka", "textik": ""},

        {"time": "2022-01-27T08:22:14.670Z", "axover": 1.2, "textik": ""},
        {"time": "2022-01-27T12:32:13.671Z", "axover": 0, "textik": ""}
        

        
    ]
  },
  "encoding": {
    "x": {"title":null,
    "timeUnit":"hoursminutes",
    "field": "time",
    "type":"temporal", 
    "axis": {"format": "%H:%M","tickCount": 12}
    
    }
  },
  "layer": [
    {
    "mark": {"type": "area","interpolate": "step-after", "tooltip":true},
      "encoding": {
        "y": {
          "field": "y", 
          "type": "quantitative", "stack":false, 
          "axis": {"title":null, "labels":false, "ticks": false}},
          "fillOpacity":{"value":0.5},
          "color": {
            "field":"stav", 
            "type":"nominal",
            "scale":{
              "domain":["produkce","error","nastaveni","kusy","prestavka","program","axover"],
              "range":["#00d79f", "#ef0004","yellow","black", "grey","blue", "green"]
            }

          },
        "y2":{
          "field":"od"
        },  
        "tooltip": [
          {"field":"stav"},
          {"field": "time", "type": "temporal","format": "%d.%m.%y - %H:%M"},
          {"field":"textik"}
        ]
      }
    },
    {
    "mark": {"type": "line","interpolate": "step-after","point": {"filled":true, "fill":"green"}, "tooltip":true},
      "encoding": {
        "y": {
          "field": "axover",
          "type": "quantitative"
        },
          "tooltip": [
            {"field":"axover"},
            {"field": "time", "type": "temporal","format": "%d.%m.%y - %H:%M"}
            ]
      }
    },
    {
      "mark": {"type": "text", "baseline":"line-top", "align":"left", "dx":5, "dy":5, "fontSize":12},
      "encoding": {
        "text":{
          "field":"textik",
          "type":"nominal"          
        }

      }
    }
  ]
}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source