Minor visual bug: Bars rendering on top of axis

[s-h-a-d-o-w]

Bug Description

While testing, it looked like this usually happens with horizontal graphs.

But it seems to me that axis should generally be rendered after the bars anyway? Especially since precise positioning might sometimes/often not be possible due to anti-aliasing? But I'm not deeply familiar with vega, so maybe there are reasons to not try to resolve it like that.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 200,
  "data": {
    "values": [
      {"y": "a", "x": 608},
      {"y": "b", "x": 980},
    ]
  },
  "mark": {"type": "bar", "orient": "horizontal"},
  "encoding": {
    "x": {
      "field": "x",
      "type": "quantitative",
      "title": ""
    },
    "y": {
      "field": "y",
      "type": "nominal",
      "title": ""
    },
    "color": {
      "field": "y",
      "type": "nominal",
      "legend": null
    }
  }
}

https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAdxoATemgAsABh1L4NMljQAmPUrVJMKVKGJJBDOBDQBtUAE80IFEoAeaABsOgAcAL4KXj5MiiCBqACcoTrhALqRIMgATgDWaKCYnjhwMUjZcWzZNHCymD4wVTQAXnI2giCZtVBsajSyZAXxQwBmNYJqPoFKRSU+AI4MSHV01jSkcZh0gqXonUrediBjcBM+3jPFuyCybAj9jpvb1-sgPYJVo+OT6Bcgs9dbvdZI8lDsyLUfrIGIJBOF4UA

Checklist

• I checked for duplicate issues.

[PBI-David]

This is the Vega default. It can be changed easily enough with a zindex in the spec. For some reason, x and y axes behave differently and should probably be made consistent.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 200,
  "data": {"values": [{"y": "a", "x": 608}, {"y": "b", "x": 980}]},
  "mark": {"type": "bar", "orient": "horizontal"},
  "encoding": {
    "x": {"field": "x", "type": "quantitative", "title": ""},
    "y": {"field": "y", "type": "nominal", "title": "", "axis":{"zindex": 1}},
    "color": {"field": "y", "type": "nominal", "legend": null}
  }
}

Defaults in Vega (note the difference between the two)

[s-h-a-d-o-w]

Oh, that's awesome to know that one can change the render order like that!

(But I agree that it would be great for the default behavior being fixed, even though I'm alright with the workaround.)

[PBI-David]

@domoritz perhaps move this to Vega?

[s-h-a-d-o-w]

A downside that I just noticed with the workaround is - one can't just put zindex on all axis as a default because that will also drag the division lines in the background to the top.

[PBI-David]

Good point. It looks related to this here: #5151

[PBI-David]

@s-h-a-d-o-w in the meantime as a quick workaround, set an axis offset.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 200,
  "data": {"values": [{"y": "a", "x": 608}, {"y": "b", "x": 980}]},
  "mark": {"type": "bar", "orient": "horizontal"},
  "encoding": {
    "x": {"field": "x", "type": "quantitative", "title": ""},
    "y": {"field": "y", "type": "nominal", "title": "", "axis":{ "offset":1}},
    "color": {"field": "y", "type": "nominal", "legend": null}
  }
}

[s-h-a-d-o-w]

Thank you very much but I only pointed out the above in case it might impact how this will be resolved or for the sake of other people.

(For my use case, the zindex solution is better, since I don't need to put it on both axis and the axis offset would cause the graph to look a bit broken.)

[PBI-David]

I agree. I think this should be moved to Vega so that axis domains and grid lines can have different z indexes. As a new user, I would find the current behaviour a bit non-intuitive.