Bar Chart cuts off bars

Using Streamlit
1

Hey everyone,

I’ve been trying for a while to make a simple bar plot of features importance, with data from a dataframe. But unfortunately, i’ve been having no sucess.
Following the documentation, the first thing i tried was a simple:

chart_data = pd.DataFrame(columns=features)
chart_data.loc[0, :] = feature_importances
st.bar_chart(chart_data.transpose())

But it produced the following:

first_attempt
first_attempt746×197 2.94 KB

Then i found the following topic and decided to create a chart constructor like so (also changed the dataframe so it is easier to assign each column):

chart_data = pd.DataFrame()
chart_data[‘features’] = features
chart_data[‘feature_importance’] = feature_importances

chart = alt.Chart(chart_data).mark_bar().encode(
x=‘features’,
y=‘feature_importance’)
st.write(“”, “”, chart_v1)

But still, all i got was this:

[Album] imgur.com

(sorry, new users can only upload a single image)

Which is even worse as no bars are shown whatsoever, even with the height parameter specified as 120 (had the same result when it used the default value of 0).

So, am I missing something? Is there any tip you can give me to plot this simple bar graph?

Thanks in advance!

2

Hi @marciorpcoelho - welcome to the Streamlit community!

Your code generally looks write on the Streamlit side, so I’m guessing it has to do with something in your dataframe. Could you copy in either a sample of that or a print out of what that looks like?

Basically this is close to what I assume you have and it works for me:

features = np.array(['feature 1', 'feature 2', 'feature 3'])
features_importances = np.array([.5, .25, .4])

chart_data = pd.DataFrame()
chart_data['features'] = features
chart_data['feature_importance'] = features_importances

chart_v1 = alt.Chart(chart_data).mark_bar().encode(
x='features',
y='feature_importance')
st.write("", "", chart_v1)

features
features1452×440 7.64 KB

3

@marciorpcoelho: I’m sorry you’re having this problem.

The issue might be that the vertical space is being monopolized by the labels.

Have you tried increasing the figure’s height?

Also, if you’re using alt.Chart you could use the lableAngle parameter to reclaim some vertical space.

Thanks for using Streamlit! :heart:

4

Thanks for your reply.
This is an example of my dataframe, which is very similar to yours:

[Album] Imgur

After looking at @Adrien_Treuille 's answer, the problem was really with the size of the x-axis label.
After editing it a bit, I got to work.

Thanks for your help!

1 Like
5

Thanks for your reply.
As for your link, thanks but I had already seen it, and actually link’d it in my original post :stuck_out_tongue:

Regardless, the labelAngle parameter did it. The graph space was in fact being monopolized by the features_name in the x-axis. After twisting it a bit and changing the names, I got it to work.

Thanks for your answer, and it’s been a pleasure so far working with streamlit. Changed my work from night to day!

1 Like
6

Oh oops. I didn’t see that you’d already linked to that post. :laughing: In any case, I’m glad the labelAngle thing worked.

Also, please note that we have an engineer working on this now. Feel free to follow that issue if you’d like to see all the latest developments. :slight_smile:

Thanks for using Streamlit!

1 Like