Set altair theme to None for the entire (multi-page) app

[johanneswerner]

Hello

I have a multi-page app with several altair plots.

I noticed that the zero position in the altair plots with the streamlit theme is sometimes not entirely correct:

From A new Streamlit theme for Altair and Plotly charts

If I compare the two plots, I notice that the zero position is for the default theme is not centered at zero but moved a bit up on the y axis and moved a bit right to the x axis. (Not sure if this is intended or a bug but it looks wrong to me)

Question: How can I set globally to use None instead of the default streamlit theme for the plots?

Alternative: How can I set the zero on both axis in the default template in the correct position?

Thank you very much!

[dataprofessor]

@johanneswerner

If I compare the two plots, I notice that the zero position is for the default theme is not centered at zero but moved a bit up on the y axis and moved a bit right to the x axis. (Not sure if this is intended or a bug but it looks wrong to me)

The slight difference in the 2 plots is due to the step size of the Y-axis which is 10 for the top plot whereas the the step size is 5 for the bottom plot. More details here.

@johanneswerner

Question: How can I set globally to use None instead of the default streamlit theme for the plots?

As mentioned in the blog you can use the following to use the default Altair theme:

st.altair_theme(..., theme=None)

@johanneswerner

Alternative: How can I set the zero on both axis in the default template in the correct position?

Details on customizing the axis limits is shown in Altair’s documentation:

https://altair-viz.github.io/user_guide/customization.html#adjusting-axis-limits

[johanneswerner]

I believe my question was not phrased clearly enough.

1. It is not about the stepsize, but about the position of the 0 on the axis labels. See below the same images, but I extended with a red line the x axis to the left. In the first plot (the default streamlit theme), the line is under the 0 on the y axis, in the second plot (the None theme), the line extended axis goes through the middle of the 0.

2. streamlit has no method altair_theme(), it has the method altair_chart(). altair_chart() has the parameter theme, but this would mean that every plot would need to be adjusted in every plot instead of globally.

So, my questions stay the same.

1. Can I set globally the theme for all plots in the multipage app instead of setting the theme parameter in the altair_chart() method?
2. How can I modify the default streamlit theme to not misalign the zero but to center it instead as in the second plot?
3. Alternatively, how can I make a custom theme as copy of the standard theme and set this one as default for all plots?

I hope it is clearer now. Thank you very much for your help.

[edsaac]

@johanneswerner

How can I modify the default streamlit theme to not misalign the zero but to center it instead as in the second plot?

You can add those tweaks to your altair charts without losing the default theming. Look for the labelFlush property in altair.Axis to modify that misalignment.

Code:

import streamlit as st
import altair as alt
from vega_datasets import data

source = data.cars()

cols = st.columns(2)

with cols[0]:
    "Streamlit default theme"

    chart_data = alt.Chart(source).mark_circle(size=60).encode(
        x='Horsepower',
        y='Miles_per_Gallon',
        color='Origin',
        tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon'])

    st.altair_chart(chart_data)

with cols[1]:
    "Modify `alt.Axis.labelFlush` "

    chart_data = alt.Chart(source).mark_circle(size=60).encode(
        x='Horsepower',
        y=alt.Y('Miles_per_Gallon', axis=alt.Axis(labelFlush=False)),
        color='Origin',
        tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
    )

    st.altair_chart(chart_data)

[johanneswerner]

Thank you very much for the explanation!