Altair change color of label in binding_radio

Question

I would like to change the color of 'This label' in the binding_radio selector: is that possible?

I couldn't find anything about it...

Any help would be greatly appreciated!

df = pd.DataFrame({'x':[0,0],'y':[10,20],'color':['red','blue']})

groups = df['y'].tolist()
radio_groups = alt.binding_radio(
    options = groups, 
    name    = 'This label'
)
select_group = alt.selection(
    type   = 'single', 
    fields = ['y'],
    bind   = radio_groups, 
    empty  ='none',
    init   = {'y': 10}
)

alt.Chart(
    df
).mark_bar(
).encode(
    x = 'x:O',
    y='y:O',
    color = 'y:O'
).add_selection(
    select_group
).transform_filter(
    select_group
)

Answer 1

The styles of bindings cannot be controlled via the chart specification, but can be controlled via standard CSS specifications. You can use your browser inspection tools to determine that the label in question is a span element with class vega-bind-name .

If you're working in Jupyter notebooks, one way to inject CSS looks like this:

from IPython.display import display, HTML
display(HTML("""
<style>
  span.vega-bind-name {
    color: red;
  }
</style>
"""))

After adding this to the cell, the resulting chart looks like this: