How to add a nested X axis with streamlit

[SilentCoder]

Summary

I’m trying to make a graph like the one attached. Essentially i have date and time in two separate columns in a data frame along with a forecast column. I want to have a nested x axis such that date and time show up on the axis but nest like this. Any idea how to do this with streamlit? Thanks in advance

[Charly_Wargnier]

Hi @SilentCoder and welcome to the community!

I did play around and this is where I got up to.

import altair as alt
import pandas as pd
import streamlit as st

data = {
    'Date': ['2023-09-18', '2023-09-18', '2023-09-18', '2023-09-19', '2023-09-19', '2023-09-19'],
    'Time': ['08:00', '12:00', '16:00', '08:00', '12:00', '16:00'],
    'Forecast': [100, 200, 150, 180, 220, 170]
}
df = pd.DataFrame(data)

chart = alt.Chart(df).mark_bar().encode(
    x='Time:O',
    y='Forecast:Q',
    column='Date:O',
    color=alt.Color('Forecast:Q', scale=alt.Scale(scheme='blues'))
).properties(
    width=100,
    height=150,
)

st.altair_chart(chart)

You may need to tweak the code a bit more to get a line chart, but hopefully, that helps you get started!

Best,
Charly

[SilentCoder]

Thank you so much. This is super helpful. I appreciate it.

[CarlosSerrano]

@SilentCoder ,

Expanding on @Charly_Wargnier solution, you could use a lambda expression on your Dataframe to combine the fields and pass those to Altair.

import altair as alt
import pandas as pd
import streamlit as st

data = {
    "Date": [
        "2023-09-18",
        "2023-09-18",
        "2023-09-18",
        "2023-09-19",
        "2023-09-19",
        "2023-09-19",
    ],
    "Time": ["08:00", "12:00", "16:00", "08:00", "12:00", "16:00"],
    "Forecast": [100, 200, 150, 180, 220, 170],
}
df = pd.DataFrame(data)
df["TS"] = df.apply(lambda x: f'{x["Date"]} {x["Time"]}', axis=1)
chart = (
    alt.Chart(df)
    .mark_line()
    .encode(
        x="TS:O",
        y="Forecast:Q",
        # color=alt.Color("Forecast:Q", scale=alt.Scale(scheme="blues")),
    )
)
st.altair_chart(chart, use_container_width=True)

[Charly_Wargnier]

Nice!

Thanks, Carlos!