Does altair's `set_embed_options` work with Streamlit?

🎈 Using Streamlit
1

By default, charts from altair have an icon you can click on to save the chart in various formats (the “…” in the upper right).

In this notebook, alt.renderers.set_embed_options(actions=False) succeeds in hiding that:

Screen Shot 2020-01-20 at 3.39.31 PM
Screen Shot 2020-01-20 at 3.39.31 PM1472×792 75.1 KB

But doing the same in Streamlit doesn’t seem to have any effect.

I guess Streamlit is probably rendering the plots in some way that doesn’t use these settings. Is there another way to have settings like this applied for Altair charts in Streamlit?

2 Likes
2

Hey @dchudz,

Yes, you are right currently there’s no possible way to do that. But in the meantime you could do something like this:

import pandas as pd
import numpy as np
import altair as alt

df = pd.DataFrame(
    np.random.randn(200, 3),
    columns=['a', 'b', 'c'])

c = alt.Chart(df).mark_circle().encode(
    x='a', y='b', size='c', color='c')

st.markdown("""
    <style type='text/css'>
        details {
            display: none;
        }
    </style>
""", unsafe_allow_html=True)

st.altair_chart(c)
2 Likes
3

Good point, thanks.

4

This CSS hack is very handy. Thanks!

Is there an easy additional workaround to get the chart rendered to the full width of its container?

Currently the chart width isn’t as wide as the container because at render time it leaves some space for the (gone) button.

5

Thanks for the work-around. Is it possible to hide only selected elements from the menu?

In Altair it is possible to do that::
plot.save('page.html', embed_options={"actions":{"export": True, "source": False, "compiled": False, "editor": False}})

6

Are there any news on this issue on how to only show the export function?

7

Hey @johanneswerner, pinging @lukasmasuch who has extensive experience in Altair + Streamlit, and might know the answer to that! :slight_smile:

8

Unfortunately, there isn’t any option to only show the export function, and we probably won’t be working on this within the next few months :frowning:

9

Thank you for the update. :slight_smile: would be glad to know whenever this changes

1 Like
10

Hi all @johanneswerner @lukasmasuch @dchudz :wave:

Marking this post as solved because embedOptions can be passed via the Altair chart’s usermeta property. Here’s an example where in the first chart, we customize download filename of the “Save as PNG/SVG” option and show only the export function. In the second chart, we disable all actions:

import altair as alt
import pandas as pd

import streamlit as st

df = pd.DataFrame({"x": [1, 2, 3, 4], "y": [1, 2, 3, 4], "name": ["A", "B", "C", "D"]})
chart = alt.Chart(df).mark_circle().encode(x="x:O", y="y:O")

chart["usermeta"] = {
    "embedOptions": {
        "downloadFileName": "my-download-name",
        "actions": {"export": True, "source": False, "editor": False},
    }
}

st.altair_chart(chart)

chart["usermeta"] = {
    "embedOptions": {
        "actions": False,
    }
}

st.altair_chart(chart)

Notice in the below GIF the name of the downloaded image, and note that the actions toolbar is unavailable in the second chart but available in the first. :smile:

altair-embed-options

Similarly, you could even disable the “View compiled vega” option by passing "actions": {"export": True, "source": False, "editor": False, "compiled": False},

1 Like
11

Thank you very much!

1 Like
12

@snehankekre Thank you again.

Is it possible to also disable the option “View Compiled Vega” and instead only show “Save as SVG” and “Save as PNG”?

I looked into the documentation of TopLevelLayerSpec but could not find any indication on which options are possible.

Thank you very much!

13

Yes, it is possible.

1 Like
14

My apologies, I overlooked the last sentence from the solution. Thank you again!

1 Like
15

Hi,

Is there a way to remove the chart expand (double sided arrow icon) to full screen.
some chart are not good after expanding to full screen, so i want to limit it under container size.

image

regards
Sridhar