Deneb - Cut area with no data (move start of axe from 0 to specific number)

Question

I have this code in Deneb

    {
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {
          "field": "datum_s",
          "type": "ordinal",
          "axis": {"title": "Date"}
        },
        "yOffset": {"field": "Typ"},
        "color": {"field": "Typ"},
        "x": {
          "field": "start_n",
          "type": "quantitative",
          "axis": {"title": "Hour"}
        },
        "x2": {"field": "end_n"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {
          "datum": 8,
          "type": "quantitative"
        },
        "stroke": {"value": "darkgray"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {
          "datum": 17,
          "type": "quantitative"
        },
        "stroke": {"value": "darkgray"}
      }
    }
  ]
}

sample data are:

what I want is that axe X start not from 0 but form number 7. because from hours 0 - 7 is no data and it makes huge white space in graph.

Answer 1

You can set a domainMid. I'll show you using the previous example where I no longer display 0 and the scale starts at 1.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with ranged data (aka Gantt Chart).",
  "width":400,
  "data": {
    "values": [
      {"task": "A", "start": 1, "end": 3},
      {"task": "B", "start": 3, "end": 8},
      {"task": "C", "start": 8, "end": 10}
    ]
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "task", "type": "ordinal"},
        "x": {"field": "start", "type": "quantitative", "scale":{"domainMin":1}},
        "x2": {"field": "end"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 3, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 7, "type": "quantitative"},
        "stroke": {"value": "red"}
      }
    }
  ]
}