Grouped bar charts with grid lines

[Nico Galoppo]

I'm trying to produce a grouped bar chart, with horizontal grid lines turned on. Starting from the grouped bar chart example in the vega-lite editor, I turned the grid property on the "y" encoding axis to True, as below. 

{

  "data": {"url": "data/population.json"},

  "transform": {

    "filter": "datum.year == 2000",

    "calculate": [

      {

        "field": "gender",

        "expr": "datum.sex == 2 ? \"Female\" : \"Male\""

      }

    ]

  },

  "mark": "bar",

  "encoding": {

    "column": {

      "field": "age",

      "type": "ordinal",

      "scale": {"padding": 4},

      "axis": {"orient": "bottom","axisWidth": 1,"offset": -8}

    },

    "y": {

      "aggregate": "sum",

      "field": "people",

      "type": "quantitative",

      "axis": {"title": "population","grid": true}

    },

    "x": {

      "field": "gender",

      "type": "nominal",

      "scale": {"bandSize": 6},

      "axis": false

    },

    "color": {

      "field": "gender",

      "type": "nominal",

      "scale": {"range": ["#EA98D2","#659CCA"]}

    }

  },

  "config": {"facet": {"cell": {"strokeWidth": 0}}}

}

However, this causes the grid lines to be interrupted between groups. I know that I can remove the padding between the age categories (in "scale" under "column" encoding), which produces the graph below. However can we make the grid lines go across group columns, while still maintaining padding between the age category columns? In many vizualizations I really do want the categories be spatially separated for ease of interpretation, but still have the gridlines to be able to compare bar height across categories.

Thanks, 

--nico

[Roy I]

It seems like the Vega-Lite developers may be aware of this issue and intentionally disable displaying default grid.

A simple workaround is to modify the Vega spec generated by Vega-Lite.  Leave the original Vega-Lite spec unchanged (with y-axis grid set to false), but in the generated Vega spec, set grid to true:

Vega 2 spec generated by Vega-Lite

----------------------------------

...

         "axes": [

            {

              "type": "y",

              "scale": "y",

              "format": "s",

              "grid": false,          // change this to true

              "title": "population"

            }

          ]

...

[Kanit Wongsuphasawat]

Hi,

Sorry for delayed reply.  Currently we don't have a property for handling this case, but we will make sure to support this in the version 2 release. 

I have created this issue: https://github.com/vega/vega-lite/issues/1636 that you can track our progress.

–Kanit 

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.