How to display multiple charts with varying x-scales side by side in Vega

Question

I have a set of charts with the same y-scale but varying x-scales. I am using hconcat to display them side by side. In order to conserve space and avoid repetition, I have disabled the y-axis for all but the first chart. However, this is causing the title of the first chart to offset:

This is a link to a Vega Editor.

As the blue circle indicates, the two titles, "Chain" and "Mini Invaders," are not in line. Is there a way to fix this?

I have tried to express these charts using facet but as far as I can tell, facets do not permit varying x-scales. However, please do let me know if this is somehow possible with facets.

Answer 1

You need labelBound: true in your spec.

Editor

{
  "config": {
    "view": {
      "continuousWidth": 400,
      "continuousHeight": 300,
      "stroke": "#000000",
      "strokeOpacity": 1,
      "strokeWidth": 2
    },
    "axis": {"labelFontSize": 24, "titleFontSize": 24,  "labelBound":true},
    "legend": {"labelFontSize": 24, "labelLimit": 0, "titleFontSize": 32},
    "title": {"baseline": "bottom", "fontSize": 24}
  },
  "hconcat": [
    {
      "layer": [
        {
          "mark": {"type": "area", "clip": true, "opacity": 0.2},
          "encoding": {
            "color": {
              "field": "Variations",
              "legend": {
                "orient": "top",
                "symbolOpacity": 1,
                "symbolSize": 200,
                "symbolStrokeWidth": 3,
                "symbolType": "stroke"
              },
              "scale": {
                "domain": ["Original Algorithm"],
                "range": [
                  "#e41a1c",
                  "#377eb8",
                  "#4daf4a",
                  "#984ea3",
                  "#a65628",
                  "#646464"
                ]
              },
              "type": "nominal"
            },
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "axis": {"labels": true, "tickCount": 5, "title": null},
              "field": "lower",
              "type": "quantitative"
            },
            "y2": {"field": "upper"}
          }
        },
        {
          "mark": {"type": "line", "clip": true},
          "encoding": {
            "color": {"field": "Variations", "type": "nominal"},
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "field": "regret",
              "scale": {"domain": [0, 1]},
              "type": "quantitative"
            }
          }
        }
      ],
      "height": 200,
      "title": "Chain",
      "transform": [{"filter": "(datum.domain === 'Chain')"}],
      "width": 200
    },
    {
      "layer": [
        {
          "mark": {"type": "area", "clip": true, "opacity": 0.2},
          "encoding": {
            "color": {
              "field": "Variations",
              "legend": {
                "orient": "top",
                "symbolOpacity": 1,
                "symbolSize": 200,
                "symbolStrokeWidth": 3,
                "symbolType": "stroke"
              },
              "scale": {
                "domain": ["Original Algorithm"],
                "range": [
                  "#e41a1c",
                  "#377eb8",
                  "#4daf4a",
                  "#984ea3",
                  "#a65628",
                  "#646464"
                ]
              },
              "type": "nominal"
            },
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "axis": {"labels": false, "tickCount": 5, "title": null},
              "field": "lower",
              "type": "quantitative"
            },
            "y2": {"field": "upper"}
          }
        },
        {
          "mark": {"type": "line", "clip": true},
          "encoding": {
            "color": {"field": "Variations", "type": "nominal"},
            "x": {"field": "step", "type": "quantitative"},
            "y": {
              "field": "regret",
              "scale": {"domain": [0, 1]},
              "type": "quantitative"
            }
          }
        }
      ],
      "height": 200,
      "title": "Mini Invaders",
      "transform": [{"filter": "(datum.domain === 'Mini Invaders')"}],
      "width": 200
    }