Display two line charts using Deneb Visual Vega Lite

[userpowerbiii12]

I wanted to try the Deneb Power bi visual , I want to display two measures "Count of leaves taken in 2022" and "Count of leaves taken in 2023" using Vega Lite. Problem is I didn't know how to display two line charts in my Y axis.

Here's how it currently looks (I only tried displaying 1 measure at a time)

I followed this Youtube tutorial

Is there a way to display both charts at the same time ?

this is my code :

{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "area",
"line": {"color": "#7b516f"},
"color": {
"x1": 1,
"y1": 1,
"gradient": "linear",
"stops": [
{"offset": 0, "color": "white"},
{"offset": 1, "color": "#7b516f"}
]
}
}
},
{
"mark": {
"type": "bar",
"width": 2,
"clip": true,
"line" : {"color":"7b516f"},
"color": {
"x1": 1,
"y1": 1,
"gradient": "linear",
"stops": [
{"offset": 0.5, "color": "white"},
{"offset": 1, "color": "7b516f"}
]
}
}
},
{
"mark": {
"type": "text",
"yOffset": -10,
"size": 10,
"color": "#000000"
},
"encoding": {
"text": {"field": "Leaves Count 2023"}
}
},
{
"mark": {
"type": "text",
"yOffset": -10,
"size": 10,
"color": "#000000"
},
"encoding": {
"text": {"field": "Leaves Count 2023"},
"opacity": {
"condition": {
"test": {"field": "MONTH", "equal": "off"},
"value": 0.1
},
"value": 1
},
"y": {"field": "Leaves Count 2023", "type": "quantitative", "axis": null}
}
}
],
"encoding": {
"x": {
"field": "MONTH",
"type": "ordinal",
"axis": {"labelPadding": 0},
"title": null
},
"y": {
"field": "Leaves Count 2023",
"type": "quantitative",
"axis": null
}
}
}

[MFelix]

Hi @userpowerbiii12 ,

Try the following code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "#7b516f"},
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 0.8, "color": "#7b516f"}
          ]
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "width": 2,
        "clip": true,
        "color": {
          "x1": 1,
          "y1": 1,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "white"},
            {"offset": 0.8, "color": "#7b516f"}
          ]
        }
      },
      "encoding": {
        "opacity": {
          "condition": {"test": {"field": "__selected__", "equal": "off"}, "value": 0.1},
          "value": 1
        },
        "y": {"field": "__1____highlight", "type": "quantitative", "axis": null}
      }
    },
    {
      "mark": {"type": "text", "yOffset": -10, "size": 10, "opacity": 0.2},
      "encoding": {"text": {"field": "__1__"}}
    },
    {
      "mark": {"type": "text", "yOffset": -10, "size": 10},
      "encoding": {
        "text": {"field": "__1__"},
        "opacity": {
          "condition": {"test": {"field": "__selected__", "equal": "off"}, "value": 0.1},
          "value": 1
        },
        "y": {"field": "__1____highlight", "type": "quantitative", "axis": null}
      }
    },
    {
      "mark": {"type": "area", "color": "blue", "opacity": 0.05},
      "encoding": {
        "x": {"field": "MONTH", "type": "ordinal", "axis": {"labelPadding": 0}, "title": null},
        "y": {"field": "Leaves Count 2022", "type": "quantitative", "axis": null}
      }
    }
  ],
  "encoding": {
    "x": {"field": "MONTH", "type": "ordinal", "axis": {"labelPadding": 0}, "title": null},
    "y": {"field": "Leaves Count 2023", "type": "quantitative", "axis": null}
  }
}

[userpowerbiii12]

Actually earlier this hour I did some changes to successfully displays the gradient bars that didn't show up earlier due to couple mistakes. I edited the code in my question , could you tell me how I would edit it in my case to keep the gradient bars showing in both cases?