Grouped bar charts with grid

[ngaloppo]

I'm trying to produce a grouped bar chart, with horizontal grid lines turned on. Starting from the grouped bar chart example in the altair tutorials, I turned on the grid on the Y axis, as follows:

Chart(population, transform=t).mark_bar().encode(
    X('gender:N', axis=False, scale=Scale(bandSize=6)),
    Y('sum(people):Q', axis=Axis(grid=True)),
    Color('gender:N', scale=Scale(range=["#FF9800", "#03A9F4"])),
    Column('age:O', axis=Axis(orient='bottom'))
).configure(
    facet=FacetConfig(cell=CellConfig(strokeWidth=0, height=250))
)

However, this causes the grid lines to be interrupted between groups. How can we make the grid lines go across group columns?

Thanks,

--nico

[jakevdp]

You can set the padding attribute within the scale; for example:

from altair import *
population = load_dataset('population')

Chart(population).mark_bar().encode(
    X('sex:N', axis=False, scale=Scale(bandSize=6)),
    Y('sum(people):Q', axis=Axis(grid=True)),
    Color('sex:N', scale=Scale(range=["#FF9800", "#03A9F4"])),
    Column('age:O', axis=Axis(orient='bottom'), scale=Scale(padding=0))
).configure_facet_cell(
    strokeWidth=0, height=250
)

The result looks a bit different than yours because I didn't apply any transform.

[ngaloppo]

Thanks that helps. Now what if I want the bars to be grouped, not only sequentially, but also visually? In other words, how do I get the padding between groups back? ;-)

Sorry, that's not very useful, but 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...

[ngaloppo]

Apparently this is a "feature" of vega-lite, and the desired appearance can only be achieved through editing of the resulting vega spec.

https://groups.google.com/d/msg/vega-js/P7a_k0sEVNA/pqJ8hVaAAQAJ

[ngaloppo]

There is now a feature request for this in vega/vega-lite#1636

[jakevdp]

Thanks!

[ellisonbg]

Closing as vega-lite-related.

[jeet183]

You can set the padding attribute within the scale; for example:

from altair import *
population = load_dataset('population')

Chart(population).mark_bar().encode(
    X('sex:N', axis=False, scale=Scale(bandSize=6)),
    Y('sum(people):Q', axis=Axis(grid=True)),
    Color('sex:N', scale=Scale(range=["#FF9800", "#03A9F4"])),
    Column('age:O', axis=Axis(orient='bottom'), scale=Scale(padding=0))
).configure_facet_cell(
    strokeWidth=0, height=250
)

The result looks a bit different than yours because I didn't apply any transform.

scale is not available in Column in latest version of altair. How to achieve this in latest version?

[jakevdp]

Use the spacing argument to configure_facet; see https://altair-viz.github.io/gallery/us_population_over_time.html