Tooltip and axis labels are not displaying correct date for st.altair_chart

[gcamargo1]

Summary

When plotting an Altair plot with date in tooltip, display is incorrect

Steps to reproduce

Code snippet:

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

df = pd.DataFrame(
    {
        "value": [2, 4, 8, 0],
        "date_str": ["2015-06-01", "2015-06-02", "2015-06-03", "2015-06-04"],
        "date_datetime": ["2015-06-01", "2015-06-02", "2015-06-03", "2015-06-04"],
    },
)
df["date_datetime"] = pd.to_datetime(df["date_datetime"])

chart = (
    alt.Chart(df)
    .mark_line()
    .encode(
        x="date_datetime:T",
        y="value:Q",
        tooltip=["date_str", "date_datetime:T", "value:Q"],
    )
)
st.altair_chart(altair_chart=chart, use_container_width=True)

Expected behavior:

I expected to see June 4th 2015 and I saw June 3rd 2015.

Actual behavior:

Please see above

Is this a regression?

don't know.

Debug info

• Streamlit version: 1.5.0
• Python version: 3.9.4
• Using Conda? PipEnv? PyEnv? Pex? - No
• OS version: MacOS bigsur
• Browser version: chrome 96.0.4664.55

Additional information

I looked into already published issues and I could not find anything related to this. Thank you.

[arcanaxion]

I'm facing a similar issue. Try changing your tooltip line to tooltip=["date_str", alt.Tooltip("date_datetime:T", format="%Y-%m-%dT%H:%M:%S"), "value:Q"] to see the time.

Say your machine is in UTC-5, you'll probably find that where date_str is "2015-06-04", date_datetime was probably "2015-06-03T19:00:00". In my case, since my machine is on UTC+8, I'm seeing it as "2015-06-04T08:00:00".

It seems like Streamlit is converting the datetimes to the timezone on the local machine. If no tz info is specified for the datetime given, it assumes UTC. From what I've tried, this only seems to be happening to Altair charts in Streamlit. It does not happen to Altair on its own, and it does not happen to st.line_chart.

[LukasMasuch]

Thanks for reporting this issue! As suggested by @arcanaxion, the problem is indeed related to how altair processes date timezones. One fix from our side might be to always set the scale to utc for datetime objects (as we do with date objects already). But I'm not sure yet if there are any other negative sideffects if we do this.

[kmcgrady]

This seems very related to vega/altair#2540 The solution would be to put the dates into the ISO-8601 format.

[sfc-gh-jcarroll]

I'm bumping this up to a P2 since it also impacts the axis labels (as seen in the screenshot above) and we heard about it from a few places recently. I don't think the provided workaround would fix the axis labels, just the tooltip.

I don't have edit access on the issue, but would be nice if someone could update the title and summary to reflect that it's not just the tooltip impacted.

[selwyth]

Confirming that I experience this issue in the U.S. when using Streamlit, and not in Europe when using Streamlit.

It works everywhere in Jupyter notebook (without the st.altair_chart of course).

I suggest for the title to be "Tooltip and axis labels are not displaying correct for st.altair_chart when the end-user is in UTC -X timezones". 😄

[jmberros]

Still experiencing this as of Feb 2024, not a nice bug. I'm changing all tooltips to use a stringified version of the date meanwhile. :/

[kuza55]

Running into the issue as well.

It seems like streamlit needs to set the scale property on the Tooltip as well as on the axis markers as per vega/altair#2077 (comment)

alt.Tooltip(name, scale={'type': 'utc'})

Though apparently Altair does not support this Vega feature, so this probably needs a fix in Altair first...