vega lite - Grid with Pre-Binned Data

Question

With "bin": "binned" I can use pre-binned data. How can I enable the grid? It seems that during the vega-lite to vega translation my grid settings are overridden to false.

{ "mark": "bar",
  "encoding": {
    "x": {
      "type": "temporal",
      "bin": "binned",
      "field": "start",
      "axis": {"grid": true}
    },
    "x2": {"field": "end"},
    "y": {"type": "quantitative", "field": "value"}
  },
  "transform": [
    {"calculate": "toDate(datum.day)", "as": "day"},
    {"calculate": "timeOffset('hours', datum.day, -12)", "as": "start"},
    {"calculate": "timeOffset('hours', datum.day, 12)", "as": "end"}
  ],
  "height": 250,
  "width": 800,
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"day": "2021-01-01T00:00:00", "value": 5},
      {"day": "2021-01-02T00:00:00", "value": 4},
      {"day": "2021-01-04T00:00:00", "value": 5},
      {"day": "2021-01-05T00:00:00", "value": 4},
      {"day": "2021-01-09T00:00:00", "value": 1},
      {"day": "2021-01-10T00:00:00", "value": 3},
      {"day": "2021-01-11T00:00:00", "value": 2},
      {"day": "2021-01-12T00:00:00", "value": 3},
      {"day": "2021-01-13T00:00:00", "value": 5},
      {"day": "2021-01-15T00:00:00", "value": 3}
    ]
  }}

If there is no schema solution, can the grid be re-enabled via the view api?

question from:https://stackoverflow.com/questions/65948960/grid-with-pre-binned-data

Answer 1

Well, this is pretty horrible. Layering a junk plot with matching encodings and all marks transparent. Hope someone has a better solution.

{ "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "type": "temporal",
          "bin": "binned",
          "field": "start",
          "axis": {"grid": true},
          "title": "day"
        },
        "x2": {"field": "end"},
        "y": {"type": "quantitative", "field": "value"}
      }
    },
    {
      "mark": {"type": "point", "opacity": 0},
      "encoding": {
        "x": {
          "type": "temporal",
          "field": "start",
          "axis": {"grid": true}
        },
        "y": {
          "field": "value",
          "axis": {"grid": true},
          "type": "quantitative"}
      }
    }
  ],
  "transform": [
    {"calculate": "toDate(datum.day)", "as": "day"},
    {"calculate": "timeOffset('hours', datum.day, -12)", "as": "start"},
    {"calculate": "timeOffset('hours', datum.day, 12)", "as": "end"}
  ],
  "height": 250,
  "width": 800,
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"day": "2021-01-01T00:00:00", "value": 5},
      {"day": "2021-01-02T00:00:00", "value": 4},
      {"day": "2021-01-04T00:00:00", "value": 5},
      {"day": "2021-01-05T00:00:00", "value": 4},
      {"day": "2021-01-09T00:00:00", "value": 1},
      {"day": "2021-01-10T00:00:00", "value": 3},
      {"day": "2021-01-11T00:00:00", "value": 2},
      {"day": "2021-01-12T00:00:00", "value": 3},
      {"day": "2021-01-13T00:00:00", "value": 5},
      {"day": "2021-01-15T00:00:00", "value": 3}
    ]
  }
}