Using altair: How to set FontSize, config axes and so on?

Random
1

Hey guys, I am trying to set the Font Size for the axes since the result is showing this way to small. So how can I do so ? I am new to programming and really a noob, workarounds/solutions ive seen so far didnt work. So maybe one of you has an idea how , for instance, to set the font size of the y and x axis seperately or both togehter (both ways d be nice). I think its an easy task for you so am hoping u can help me :slight_smile:
thanks in advance; the following shows a code sniplet:

with st.beta_expander("Verteilung der 16 Polyzyklischen Aromatischen Kohlenwasserstoffe der US-Environmental Protection Agency (16EPA-PAK)"):
                source = pd.DataFrame({'Parameter': ['Naphtalin', 'Acenaphtylen', 'Acenaphten', 'Fluoren', 'Phenanthren', 'Anthracen', 'Fluoranthen', 'Pyren', 'Benz(a)anthracen', 'Chrysen', 'Benzo(b)fluoranthen', 'Benzo(k)fluoranthen', 'Benzoapyren', 'Indeno(123-cd)pyren', 'Dibenz(ah)anthracen', 'Benzo(ghi)perylen'],
                                    'Massenkonzentration': [Naphthalin_A, Acenaphtylen_A, Acenaphten_A, Fluoren_A, Phenanthren_A, Anthracen_A, Fluoranthen_A, Pyren_A,Benzaanthracen_A, Chrysen_A, Benzobfluoranthen_A, Benzokfluoranthen_A, Benzoapyren_A, Indeno123cdpyren_A, Dibenzahanthracen_A, Benzoghiperylen_A],
                                    'udB': [udB_naphtalin, udB_acenaphtylen, udB_acenaphten, udB_fluoren, udB_Phenanthren, udB_Anthracen, udB_Fluoranthen, udB_Pyren, udB_Benzaanthracen, udB_Chrysen, udB_Benzobfluoranthen, udB_Benzokfluoranthen, udB_Benzoapyren, udB_Indeno123cdpyren, udB_Dibenzanthracen, udB_Benzoghiperylen],
                                    'mg/kg': [PAK_Grenze[0], PAK_Grenze[1], PAK_Grenze[2], PAK_Grenze[3], PAK_Grenze[4], PAK_Grenze[5], PAK_Grenze[6], PAK_Grenze[7], PAK_Grenze[8], PAK_Grenze[9], PAK_Grenze[10], PAK_Grenze[11], PAK_Grenze[12], PAK_Grenze[13], PAK_Grenze[14], PAK_Grenze[15]]
                                    })

                bar_pak = alt.Chart(source).mark_bar(color='#0040FF', opacity=0.3).encode(
                    x='Parameter', y='Massenkonzentration').properties(width=alt.Step(70))  # coole Farbe: #21B85B
                tick_pak = alt.Chart(source).mark_tick(
                text='green', thickness=0, size=70 * 0.9).encode(x='Parameter', y='Massenkonzentration')
                text_pak_einheit = tick_pak.mark_text(
                align='right',
                color='black',
                baseline='middle',
                fontStyle='bold',
                fontSize=10,
                dx=-21,
                dy=tick_höhe
                ).encode(
                text='mg/kg'
                )
                
                st.altair_chart(bar_pak+tick_pak+text_pak_einheit, use_container_width=True)
1 Like
2

Hi @maowb!

Welcome to the Streamlit forum! :tada: :raised_hands:

Have you tried to play with the fontSize parameter?

Then you can display the chart via:

st.altair_chart(data)

Let us know how it goes.

Best,
Charly

3

Hi and thanks for the answer. I just dont know where to put this fontSize according to the code (and dont know how to differ between the axis and so on. ive seen some .properties(fontSize=10) … and so on options, but they all dont work at places where i think they might work :-(. Maybe its because this is streamlit and so its a bit different… Ofc i tried to insert the fontsize at different places. The code already tells “display chart” see last line. Or do i have a misunderstanding ?

4

no one knows? :frowning:

5

Here is a short code snippet - how to configure font size for axes. Hope it will help)


import altair as alt
from vega_datasets import data
cars = data.cars()

alt.Chart(cars).mark_point().encode(
    alt.X('Horsepower', axis=alt.Axis(title="HORSEPOWER")),
    alt.Y('Miles_per_Gallon', axis=alt.Axis(title="Miles Per Gallon")),
    color='Origin',
    shape='Origin'
).configure_axis(
    labelFontSize=20,
    titleFontSize=20
)
1 Like