How i make bars inside in multiple layer in Vegalite chart

Question

I am trying to create a bar chart having multiple bar with dual y axis in time series data. Issue is that when we try to create mutilpe bar and use xoffset the bar ran out of the canvas of chart. Editor link

I want both bar must be cover inside canvas irrespective of data count

Answer 1

Try setting a rangeMax.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Line chart with conditional axis ticks, labels, and grid.",
  "data": {
    "values": [
      {
        "symbol": "GOOG",
        "date": "Jan 1 2006",
        "previous": 432.66,
        "current": 235
      },
      {
        "symbol": "GOOG",
        "date": "Feb 1 2006",
        "previous": 362.62,
        "current": 205
      },
      {"symbol": "GOOG", "date": "Mar 1 2006", "previous": 390, "current": 250},
      {
        "symbol": "GOOG",
        "date": "Apr 1 2006",
        "previous": 417.94,
        "current": 215
      },
      {
        "symbol": "GOOG",
        "date": "May 1 2006",
        "previous": 371.82,
        "current": 225
      },
      {
        "symbol": "GOOG",
        "date": "Jun 1 2006",
        "previous": 419.33,
        "current": 205
      },
      {
        "symbol": "GOOG",
        "date": "Jul 1 2006",
        "previous": 386.6,
        "current": 215
      },
      {
        "symbol": "GOOG",
        "date": "Aug 1 2006",
        "previous": 378.53,
        "current": 250
      },
      {
        "symbol": "GOOG",
        "date": "Sep 1 2006",
        "previous": 401.9,
        "current": 255
      },
      {
        "symbol": "GOOG",
        "date": "Oct 1 2006",
        "previous": 476.39,
        "current": 235
      },
      {
        "symbol": "GOOG",
        "date": "Nov 1 2006",
        "previous": 484.81,
        "current": 248
      },
      {
        "symbol": "GOOG",
        "date": "Dec 1 2006",
        "previous": 460.48,
        "current": 259
      },
      {
        "symbol": "GOOG",
        "date": "Jan 1 2007",
        "previous": 501.5,
        "current": 300
      },
      {
        "symbol": "GOOG",
        "date": "Feb 1 2007",
        "previous": 449.45,
        "current": 310
      },
      {
        "symbol": "GOOG",
        "date": "Mar 1 2007",
        "previous": 458.16,
        "current": 315
      },
      {
        "symbol": "GOOG",
        "date": "Apr 1 2007",
        "previous": 471.38,
        "current": 320
      }
    ]
  },
  "autosize": {"type": "fit", "contains": "padding"},
  "width": 1200,
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "scale": {"nice": false, "rangeMax":980},
      "axis": {
        "labelAlign": "left",
        "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
        "labelOffset": 1,
        "labelPadding": {
          "condition": {
            "test": {"field": "value", "timeUnit": "month", "equal": 1},
            "value": -24
          },
          "value": 0
        },
        "tickSize": {
          "condition": {
            "test": {"field": "value", "timeUnit": "month", "equal": 1},
            "value": 30
          },
          "value": 2
        }
      }
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "width": 15, "xOffset": 10},
      "encoding": {
        "y": {"field": "previous", "type": "quantitative"},
        "color": {"datum": "Previous Period", "scale": {"range": ["orange"]}}
      }
    },
    {
      "mark": {"type": "bar", "width": 15},
      "encoding": {
        "y": {"field": "current", "type": "quantitative"},
        "color": {"datum": " Current Period", "scale": {"range": ["#D3D3D3"]}}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent", "y": "independent"}},
  "config": {"axis": {"domainColor": "#ddd", "tickColor": "#ddd"}}
}