Altair stacked bar graph width problem

🎈 Using Streamlit
,
1

Summary

The generated graphic does not shrink itself horizontally. This causes it to overflow the page.

Steps to reproduce

Code snippet:

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

source = pd.read_excel('database_.xlsx')
# https://we.tl/t-LQ27JOhg0E database file

chart = alt.Chart(source).mark_bar().encode(
    x=alt.X("MACHINE:O", title=None, axis=alt.Axis(labels=False)),
    y='sum(SHIFT_TOTAL_M):Q',
    color='MACHINE:N',
    column=alt.Column('DATE', title=None, header=alt.Header(orient='bottom', format="%Y - %m - %d", labelAngle=270, labelPadding=80, labelFontSize=13, labelColor='Gray'))
)

st.altair_chart(chart, theme="streamlit", use_container_width=False)

1
11830×981 94.6 KB

Debug info

  • Streamlit version: (version 1.17.0)
  • Python version: (Python 3.9.10)

Is there a way to make it look like other charts? Thank you.

2

Have you tried set use_container_width = True ?

3

2
21430×718 35.8 KB

Yes. I think it is about bar width.

4

My streamlit version is 1.13.0 Altair 4.2.0 , I am not sure if this causes the problem
But in my case use_containers_width param works fine

image
image1603×606 74.1 KB

5

Hi @oliverjia. There is no param as ‘use_containers_width’. I think you typed it by mistake. Param name is ‘use_container_width’ without s letter. As I said, it changes only the bar width.

6

Hi @volkan ,

Would you maybe want to try changing the properties to a specific width?
Example:

alt.Chart(data).mark_bar(size=30).encode(
    x='name:O',
    y='value:Q'
).properties(width=200)
7

Hi @willhuang ,

mark_bar(size=30) this code is changing the bar width for me. Also, I don’t want to use certain width parameters as I don’t want to restrict the view in different browsers and devices.

Interestingly, I still haven’t found a solution to the problem.

8

Hi, the mark_bar parameter is working or not working?

9

It is working.

mark_bar size-2

mark_bar size-20
mark_bar size-20362×502 16.7 KB

mark_bar(size=2) for the first image and mark_bar(size=20) for the second image. As a result, no matter how much I change this parameter, I think it has nothing to do with my problem.