Thanks to visit codestin.com
Credit goes to github.com

Skip to content

st.altair_chart does not show with a good size if the title is too long #9984

@RubenCata

Description

@RubenCata

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.

image

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

Open in Streamlit Cloud

# 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

Additional Information

Metadata

Metadata

Assignees

Labels

feature:st.altair_chartRelated to the `st.altair_chart` elementpriority:P3Medium prioritystatus:confirmedBug has been confirmed by the Streamlit teamtype:bugSomething isn't working as expected

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions