Bar Chart cuts off bars

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:

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:

(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!

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)

@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:

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

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

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

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