-
Notifications
You must be signed in to change notification settings - Fork 4k
Description
Checklist
- I have searched the existing issues for similar issues.
- I added a very descriptive title to this issue.
- I have provided sufficient information below to help reproduce this issue.
Summary
st.altair_chart fails to properly display alt.Chart with title that exceed the container width.
When using st.altair_chart, charts with titles that do not fit within the container width are rendered poorly.
In the example below, two st.altair_chart instances use the same alt.Chart object. The first chart has sufficient space to display the entire title, resulting in a clear presentation. In contrast, the second chart has limited space, causing the title to be truncated and the chart to appear distorted.
If the title length is increased to affect the first chart as well, it will also render poorly, indicating that the issue is not related to the use_container_width parameter in st.altair_chart.
Reproducible Code Example
# create a very basic alt.chart
import streamlit as st
import altair as alt
import pandas as pd
# Create a simple dataframe
df = pd.DataFrame({"x": [1, 2, 3, 4, 5], "y": [10, 20, 30, 40, 50]})
# Create a simple chart
chart = (
alt.Chart(
data=df,
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec purus euismod, ultricies nunc nec, ultricies nunc.",
)
.mark_line()
.encode(x="x", y="y")
)
# Render the chart
st.altair_chart(chart, use_container_width=True)
st.altair_chart(chart, use_container_width=False)Steps To Reproduce
Run the previous code
Expected Behavior
The chart should be always displayed with the appropriate width.
If the title exceeds the available space, it should be truncated at the point where it reaches the container's width limit without affecting the chart.
Current Behavior
If the alt.Chart title is too long, the title is truncated (which is good), but the chart is rendered with an incorrect width, leading to a poor visual presentation.
Is this a regression?
- Yes, this used to work in a previous version.
Debug info
- Streamlit version: 1.40.2
- Python version: 3.10.11
- Operating System: Windows 11
- Browser: Chrome