9

I'm loving Altair for creating choropleth maps! My biggest problem, however, is I cannot figure out how to change the size of the legend. I've read through the documentation and tried several things to no avail.

Here's an example using the unemployment map by county from Altair's docs. I added a 'config' layer to change the font size for the title on both the map and the legend. Note the .configure_legend() part of the code within "config". 

counties = alt.topo_feature(data.us_10m.url, 'counties')
source = data.unemployment.url

foreground = alt.Chart(counties).mark_geoshape(
    ).encode(
    color=alt.Color('rate:Q', sort="descending",  scale=alt.Scale(scheme='plasma'), legend=alt.Legend(title="Unemp Rate", tickCount=6))
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(source, 'id', ['rate'])
).project(
    type='albersUsa'
).properties(
    title="Unemployment Rate by County",
    width=500,
    height=300
)

config = alt.layer(foreground).configure_title(fontSize=20, anchor="middle").configure_legend(titleColor='black', titleFontSize=14) 

config

Here's what the image should look like:

enter image description here

If I change the size of the map like this:

counties = alt.topo_feature(data.us_10m.url, 'counties')
source = data.unemployment.url

foreground = alt.Chart(counties).mark_geoshape(
    ).encode(
    color=alt.Color('rate:Q', sort="descending",  scale=alt.Scale(scheme='plasma'), legend=alt.Legend(title="Unemp Rate", tickCount=6))
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(source, 'id', ['rate'])
).project(
    type='albersUsa'
).properties(
    title="Unemployment Rate by County",
    width=900,
    height=540
)

config = alt.layer(foreground).configure_title(fontSize=20, anchor="middle").configure_legend(titleColor='black', titleFontSize=14) 

config

The legend stays the same size, so that it now looks tiny in comparison to the map:

enter image description here

Alternatively, if I make the map size tiny, the legend will be huge!

enter image description here

I've tried about a dozen different things to no avail.

Anyone have a solution to this?

Ragnar Lothbrok
  • 1,045
  • 2
  • 16
  • 31

2 Answers2

10

As you have seen, the legend has a default size in pixels that is constant regardless of the size of the chart. If you would like to adjust it, you can use the configure_legend() chart method.

In Altair 3.0 or later, the following arguments are the relevant ones for adjusting the size of the legend gradient:

chart.configure_legend(
    gradientLength=400,
    gradientThickness=30
)
jakevdp
  • 77,104
  • 11
  • 125
  • 160
  • Thanks, jakevdp. Is this something that has been recently fixed in 3.0? I'm pretty sure I tried gradientHeight and gradientWidth in 2.4 and it didn't work, but this code definitely works in 3.0. However, it looks like all kinds of other things changed as well. For instance, now the color scheme looks very different :) – Ragnar Lothbrok Mar 31 '19 at 20:28
  • 1
    Legends are one of the big changes from Vega-Lite 2 to 3: there are now options for creating both horizontal and vertical legends, and the configuration options have been updated and renamed accordingly. – jakevdp Apr 01 '19 at 04:20
4

The first answer is super close but missing the most important piece for changing the font size in the legend. Use the code snippet below to adjust font size of text in the legend.

.configure_legend(
titleFontSize=18,
labelFontSize=15
)
TroyG
  • 41
  • 2