Skip to content

🖼️  Chart container

Submitted by Arnaud Miribel

Summary

Embed your chart in a nice tabs container to let viewers explore and export its underlying data.

Functions

chart_container

Embed chart in a (chart, data, export, explore) tabs container to let the viewer explore and export its underlying data.

Parameters:

Name Type Description Default
data DataFrame

Dataframe used in the dataframe tab.

 required
tabs Sequence

Tab labels. Defaults to ("Chart 📈", "Dataframe 📄", "Export 📁").

 ('Chart 📈', 'Dataframe 📄', 'Export 📁')
export_formats Sequence

Export file formats. Defaults to ("CSV", "Parquet")

 _SUPPORTED_EXPORT_KEYS
Source code in src/streamlit_extras/chart_container/__init__.py 
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@extra  # type: ignore
@contextmanager
def chart_container(
    data: pd.DataFrame,
    tabs: Sequence[str] = (
        "Chart 📈",
        "Dataframe 📄",
        "Export 📁",
    ),
    export_formats: Sequence[str] = _SUPPORTED_EXPORT_KEYS,
) -> Generator:
    """Embed chart in a (chart, data, export, explore) tabs container to let the viewer explore and export its underlying data.

    Args:
        data (pd.DataFrame): Dataframe used in the dataframe tab.
        tabs (Sequence, optional): Tab labels. Defaults to ("Chart 📈", "Dataframe 📄", "Export 📁").
        export_formats (Sequence, optional): Export file formats. Defaults to ("CSV", "Parquet")
    """

    assert all(
        export_format in _SUPPORTED_EXPORTS for export_format in export_formats
    ), f"Input format is not supported, please use one within {_SUPPORTED_EXPORTS.keys()}"

    if "chart_container_widget_key" not in st.session_state:
        st.session_state["chart_container_widget_key"] = 0

    def _get_random_widget_key() -> str:
        st.session_state.chart_container_widget_key += 1
        return st.session_state.chart_container_widget_key

    tab_1, tab_2, tab_3 = st.tabs(tabs)

    with tab_1:
        yield

    with tab_2:
        st.dataframe(data, use_container_width=True)

    with tab_3:
        st.caption("Export limited to 1 million rows.")
        export_data = data.head(1_000_000)
        for chosen_export_format in export_formats:
            export_utils = _SUPPORTED_EXPORTS[chosen_export_format]
            exporter = export_utils["function"]
            extension = export_utils["extension"]
            st.download_button(
                f"Download data as {extension}",
                data=exporter(export_data),
                file_name="data" + extension,
                mime=export_utils.get("mime"),
                key=_get_random_widget_key(),
            )

Import:

from streamlit_extras.chart_container import chart_container # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example_one

def example_one():
    chart_data = _get_random_data()
    with chart_container(chart_data):
        st.write("Here's a cool chart")
        st.area_chart(chart_data)
Output (beta)

example_two

def example_two():
    chart_data = _get_random_data()
    with chart_container(chart_data):
        st.write(
            "I can use a subset of the data for my chart... "
            "but still give all the necessary context in "
            "`chart_container`!"
        )
        st.area_chart(chart_data[["a", "b"]])
Output (beta)