vega / vega-lite

A concise grammar of interactive graphics, built on Vega.
https://vega.github.io/vega-lite/
BSD 3-Clause "New" or "Revised" License
4.65k stars 606 forks source link

Axis grid lines drawn on top of mark rect/text #5810

Open SyntaxRules opened 4 years ago

SyntaxRules commented 4 years ago

When a grid is specified in the config -> axis -> gird: true The grid lines are drawn over the top of the graph. I expected the lines to be drawn underneath the mark rect and mark text.

A simple scenario is found below. Using the "Layering text over heatmap" example on the vega-lite website, add "axis": { "grid": true } to the config section.

image

In the vega-lite editor

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
   "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "axis": {
      "grid": true,
      "gridColor": "#FFFFFF"
    },
    "view": {"fill": "#e5e5e5"}
  },
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    }
  ],
  "encoding": {
    "y": {"field": "Origin", "type": "ordinal"},
    "x": {"field": "Cylinders", "type": "ordinal"}
  },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "color": {
          "field": "num_cars",
          "type": "quantitative",
          "title": "Count of Records",
          "legend": {"direction": "horizontal", "gradientLength": 120}
        }
      }
    },
    {
      "mark": "text",
      "encoding": {
        "text": {"field": "num_cars", "type": "quantitative"},
        "color": {
          "condition": {"test": "datum['num_cars'] < 40", "value": "black"},
          "value": "white"
        }
      }
    }
  ]
}
kanitw commented 4 years ago

For now, setting "zindex": 0 will move the grid to be below the marks.