Vega Lite - Layered chart with only one X label instead of two

Question

I'm trying to replicate this graphic from excel to power bi by using deneb and vega lite:

but I'm getting this result:

Here is the code I have until now:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "orange"},
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "orange"
            },
            {
              "offset": 1,
              "color": "orange"
            }
          ]
        }
      },
      "encoding": {
        "x": {
          "timeUnit": "yearmonth",
          "field": "Displayed Month",
          "title": null,
          "type": "temporal",
          "axis": {"labels": true}
        },
        "y": {
          "field": "Sum of EUR Total Amnt Open",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "width": {"band": 0.3}
      },
      "encoding": {
        "x": {
          "timeUnit": "yearmonth",
          "field": "Displayed Month",
          "axis": {"labels": true},
          "type": "temporal",
          "title": null
        },
        "y": {
          "field": "Sum of Open items",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    }
  ],
  "resolve": {
    "scale": {
      "x": "shared",
      "y": "independent"
    },
    "axis": {
      "x": "shared",
      "y": "independent"
    }
  }
}

I tried to use the resolve option in vega lite to get the marks aligned on the same X axis but without success - could you please give me some hints on what I'm doing wrong?

Answer 1

Could something like this work for you? There are always plenty of alternatives with vega lite - it's just about finding a solution that works for you.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Displayed Month": "2023-01-01",
        "Sum of EUR Total Amnt Open": 5000,
        "Sum of Open items": 100
      },
      {
        "Displayed Month": "2023-02-01",
        "Sum of EUR Total Amnt Open": 5200,
        "Sum of Open items": 110
      },
      {
        "Displayed Month": "2023-03-01",
        "Sum of EUR Total Amnt Open": 4800,
        "Sum of Open items": 95
      },
      {
        "Displayed Month": "2023-04-01",
        "Sum of EUR Total Amnt Open": 5300,
        "Sum of Open items": 120
      },
      {
        "Displayed Month": "2023-05-01",
        "Sum of EUR Total Amnt Open": 5500,
        "Sum of Open items": 105
      },
      {
        "Displayed Month": "2023-06-01",
        "Sum of EUR Total Amnt Open": 5400,
        "Sum of Open items": 110
      },
      {
        "Displayed Month": "2023-07-01",
        "Sum of EUR Total Amnt Open": 5700,
        "Sum of Open items": 115
      }
    ]
  },
  "width": 250,
  "height": 250,
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "orange"},
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "orange"},
            {"offset": 1, "color": "orange"}
          ]
        }
      },
      "encoding": {
        "x": {
          "field": "Displayed Month",
          "title": null,
          "type": "temporal",
          "axis": {"labels": true},
          "scale": {"nice": false, "padding": 15}
        },
        "y": {
          "field": "Sum of EUR Total Amnt Open",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    },
    {
      "mark": {"type": "bar", "width": {"band": 1}},
      "encoding": {
        "x": {
          "field": "Displayed Month",
          "type": "temporal",
          "axis": {
            "labelAlign": "center",
            "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelPadding": 5,
            "tickSize": 0,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "opacity": {"value": 0.7},
        "y": {
          "field": "Sum of Open items",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    }
  ],
  "resolve": {"scale": {"x": "shared", "y": "independent"}},
  "config": {}
}

Answer 2

I have now added more months and increased the size of the chart. I also updated the bar x axis based on spec: https://vega.github.io/vega-lite/docs/timeunit.html

"type": "temporal",
"timeUnit": "yearmonth",
"bandPosition": 0,

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Displayed Month": "2022-07-01",
        "Sum of EUR Total Amnt Open": 6000,
        "Sum of Open items": 120
      },
      {
        "Displayed Month": "2022-08-01",
        "Sum of EUR Total Amnt Open": 7000,
        "Sum of Open items": 130
      },
      {
        "Displayed Month": "2022-09-01",
        "Sum of EUR Total Amnt Open": 4000,
        "Sum of Open items": 100
      },
      {
        "Displayed Month": "2022-10-01",
        "Sum of EUR Total Amnt Open": 6000,
        "Sum of Open items": 150
      },
      {
        "Displayed Month": "2022-11-01",
        "Sum of EUR Total Amnt Open": 3000,
        "Sum of Open items": 140
      },
      {
        "Displayed Month": "2022-12-01",
        "Sum of EUR Total Amnt Open": 5000,
        "Sum of Open items": 110
      },
      {
        "Displayed Month": "2023-01-01",
        "Sum of EUR Total Amnt Open": 5000,
        "Sum of Open items": 120
      },
      {
        "Displayed Month": "2023-02-01",
        "Sum of EUR Total Amnt Open": 5200,
        "Sum of Open items": 110
      },
      {
        "Displayed Month": "2023-03-01",
        "Sum of EUR Total Amnt Open": 4800,
        "Sum of Open items": 95
      },
      {
        "Displayed Month": "2023-04-01",
        "Sum of EUR Total Amnt Open": 5300,
        "Sum of Open items": 120
      },
      {
        "Displayed Month": "2023-05-01",
        "Sum of EUR Total Amnt Open": 5500,
        "Sum of Open items": 105
      },
      {
        "Displayed Month": "2023-06-01",
        "Sum of EUR Total Amnt Open": 5400,
        "Sum of Open items": 110
      },
      {
        "Displayed Month": "2023-07-01",
        "Sum of EUR Total Amnt Open": 5700,
        "Sum of Open items": 115
      }
    ]
  },
  "width": 450,
  "height": 250,
  "layer": [
    {
      "mark": {
        "type": "area",
        "line": {"color": "#148FE8"},
        "color": {
          "x1": 1,
          "y1": 1,
          "x2": 1,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {"offset": 0, "color": "#fff"},
            {"offset": 1, "color": "#148FE8"}
          ]
        }
      },
      "encoding": {
        "x": {
          "field": "Displayed Month",
          "title": null,
          "type": "temporal",
          "timeUnit": "yearmonth",
          "axis": {"labels": true},
          "scale": {"nice": false, "padding": 10}
        },
        "y": {
          "field": "Sum of EUR Total Amnt Open",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    },
    {
      "mark": {"type": "bar", "width": {"band": 0.7}},
      "encoding": {
        "x": {
          "field": "Displayed Month",
          "type": "temporal",
          "timeUnit": "yearmonth",
          "bandPosition": 0,
          "axis": {
            "labelAlign": "center",
            "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelPadding": 5,
            "tickSize": 5,
            "gridDash": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": []
              },
              "value": [2, 2]
            }
          }
        },
        "opacity": {"value": 0.7},
        "color": {"value": "#6B6A6A"},
        "y": {
          "field": "Sum of Open items",
          "type": "quantitative",
          "axis": {"labels": true},
          "title": null
        }
      }
    }
  ],
  "resolve": {"scale": {"x": "shared", "y": "independent"}},
  "config": {}
}