Allow for row level facet headers to be centered on top of each row

[joelostblom]

Enhancement Description

For charts that are faceted both column and row-wise, it would be helpful if the row level header could be displayed on top of each rows instead of to the left or to the right. Especially for long headers, they take up too much space and become hard to read if they are on the side. The only option currently is to rotate them, which makes the plot quite wide:

Open the Chart in the Vega Editor

I had hoped that setting {"labelOrient": "top"} would give the desired behavior, but for some reason that multiplies the number of labels and inserts one per subchart instead of one per row:

I would like to have just a single heading in the middle of each row and no extra spacing between the charts

Checklist

• I checked for duplicate issues.

Altair code

import altair as alt
import pandas as pd



source = pd.DataFrame(
    [
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b1", "c": "x", "p": "0.14"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b1", "c": "y", "p": "0.60"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b1", "c": "z", "p": "0.03"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b2", "c": "x", "p": "0.80"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b2", "c": "y", "p": "0.38"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b2", "c": "z", "p": "0.55"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b3", "c": "x", "p": "0.11"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b3", "c": "y", "p": "0.58"},
        {"a": "aaaaaaaaaaaaaaaaaaaa1", "b": "b3", "c": "z", "p": "0.79"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b1", "c": "x", "p": "0.83"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b1", "c": "y", "p": "0.87"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b1", "c": "z", "p": "0.67"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b2", "c": "x", "p": "0.97"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b2", "c": "y", "p": "0.84"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b2", "c": "z", "p": "0.90"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b3", "c": "x", "p": "0.74"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b3", "c": "y", "p": "0.64"},
        {"a": "aaaaaaaaaaaaaaaaaaaa2", "b": "b3", "c": "z", "p": "0.19"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b1", "c": "x", "p": "0.57"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b1", "c": "y", "p": "0.35"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b1", "c": "z", "p": "0.49"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b2", "c": "x", "p": "0.91"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b2", "c": "y", "p": "0.38"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b2", "c": "z", "p": "0.91"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b3", "c": "x", "p": "0.99"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b3", "c": "y", "p": "0.80"},
        {"a": "aaaaaaaaaaaaaaaaaaaa3", "b": "b3", "c": "z", "p": "0.37"},
    ]
)



dropdown_select = alt.binding_select(options=sorted(source['a'].unique().tolist()), name='Selection ')
dropdown = alt.selection_point(fields=['a'], bind=dropdown_select, value='a3')

alt.Chart(source, height=80, width=alt.Step(15)).mark_bar().encode(
    alt.X("c:N").title(None),
    alt.Y("p:Q"),
    alt.Color("c:N"),
    alt.Row("a:N", header=alt.Header(labelAngle=0, labelOrient='right', title=None, labelFontWeight='bold')),#, labelExpr='datum.b == "b2" ? "HHHHH": datum.axis')),
    alt.Column("b:N", header=alt.Header(labelOrient='bottom', title=None)),
).resolve_axis(
    x='independent',
)