Search code examples
vega-lite

How to center the horizontal axis


Is it possible to vertically centered the horizontal axis ? positive values stay on the top of axis, negative the bottom.

I don't find any example like this.


Solution

  • You can accomplish this using the axis.offset property. For example (open in editor):

    {
      "width": 300,
      "height": 150,
      "data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
      "transform": [{"calculate": "sin(datum.x)", "as": "sin(x)"}],
      "mark": "line",
      "encoding": {
        "x": {
          "field": "x",
          "type": "quantitative",
          "axis": {"offset": -75, "grid": false}
        },
        "y": {"field": "sin(x)", "type": "quantitative", "axis": {"grid": false}}
      },
      "view": {"stroke": 0}
    }
    

    enter image description here