How to move the Radio button to under the Title using Altair?

Question

I'm trying to move the Radio button to top under the Title. so far i have done that but unfortunately it's somehow behind the chart and it looks like it's in background

to illustrate better here's an Image:

here's my code

brush = alt.selection_interval(
    resolve='intersect' 
)

selection = alt.selection_single(
    name='Select',
    fields=['MPAA_Rating'],
    
    init={'MPAA_Rating': 'R'},
    bind={'MPAA_Rating': alt.binding_radio(options=mpaa)}
)

Chart=alt.Chart(movies).mark_circle().add_selection(
    brush,selection
).encode(
    
    alt.X('Rotten_Tomatoes_Rating', type='quantitative'),
    alt.Y('IMDB_Rating', type='quantitative'),
    color=alt.condition(brush, 'Cylinders:O', alt.value('grey'),legend=None),
    #opacity=alt.condition(brush, alt.value(0.8), alt.value(0.1)),
    opacity=alt.condition(selection |brush , alt.value(0.75), alt.value(0.05))
).properties(
    width=140,
    height=140
).facet(alt.Row('Major_Genre:O',title=None),columns=6,title="Comparing IMDB & Rotten Tomatoes Ratings").configure_title(anchor='middle')



from IPython.display import display, HTML

display(HTML("""
<style>
form.vega-bindings {
    position: absolute;
    left: 310px;
    top: 15px;
}
</style>
"""))

display(Chart)

is there a way that i can add some sort of padding to the Title? or there's a better way achieving this?

Answer 1

You could create a multiline title with title=["Comparing IMDB & Rotten Tomatoes Ratings", ""] which would add whitespace under the text.