Turn vertical bar chart to horizontal?

[hahahazel]

Hi,

Is it possible to turn vertical bar chart to horizontal?
I use this example. Instead of 50 bars showing vertically, I want the whole chart to turn 90degree right. That is x-axis (y-axis) with 3 values, y-axis (vertical) with 50 values.

st.bar_chart - Streamlit Docs

I tried the following 4 ways and does not work.
Original:

chart_data = pd.DataFrame(
    np.random.randn(50, 3),
    columns=["a", "b", "c"])

chart_data = pd.DataFrame(
np.random.randn(50, 3),
index=[“a”, “b”, “c”])

2. ```
chart_data = pd.DataFrame(
     np.random.randn(50, 3),
     columns=["a", "b", "c"],
     rotation = 90)
3. 
chart_data = pd.DataFrame(
     np.random.randn(50, 3),
     columns=["a", "b", "c"],
     rotation = "vertical")

4. chart_data = pd.DataFrame(
     np.random.randn(50, 3),
     columns=["a", "b", "c"],
     rotation = "horizontal")

[Marisa_Smith]

Hey @hahahazel,

So st.bar_chart is just a wrapper and is just meant as an easy way to create an Altair chart.

See docs.streamlit.io/library/api-reference/charts/st.bar_chart#stbar_chart

If you want a graph horizontal, you will need to create that chart yourself in Altair (or another python plotting library) rotate it with that library and then pass it to the appropriate streamlit function.

For Altair that’s: st.altair_chart

Docs for that here: docs.streamlit.io/library/api-reference/charts/st.altair_chart#staltair_chart

Actually for Altair, it looks like they just have a horizontal bar chart function:
https://altair-viz.github.io/gallery/bar_chart_horizontal.html

Happy Streamlit-ing
Marisa

[hahahazel]

@Marisa_Smith

st.altair_chart

Hello Marisa, I tried mutiple times and still doesn’t work. This is the original chart. I want to switch the x and y-axis (i.e. the food catagory on y axis). Tried many ways but does not work. I also Tried altair you just mentioned

Original code:

     chart_data = pd.DataFrame(
     np.random.rand(9, 4),
     index=["air", "coffee", "orange","whitebread","potato","wine","beer","wheatbread","carrot"])
     st.bar_chart(chart_data)

New: (does not work)

chart_data = pd.DataFrame(np.random.rand(9, 1))
d = alt.Chart(chart_data).mark_bar().encode(
x=“chart_data”,
y=[“air”, “coffee”, “orange”,“whitebread”,“potato”,“wine”,“beer”,“wheatbread”,“carrot”]
).properties(height=700)
st.altair_chart(d, use_container_width=True)

[snehankekre]

Hi @hahahazel,

I adapted your original code to create a horizontal stacked bar chart with Altair and plot it with st.altair_chart():

Code

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

chart_data = pd.DataFrame(
    np.random.rand(9, 4),
    index=["air","coffee","orange","whitebread","potato","wine","beer","wheatbread","carrot"],
)

# Vertical stacked bar chart
st.bar_chart(chart_data)

# Convert wide-form data to long-form
# See: https://altair-viz.github.io/user_guide/data.html#long-form-vs-wide-form-data
data = pd.melt(chart_data.reset_index(), id_vars=["index"])

# Horizontal stacked bar chart
chart = (
    alt.Chart(data)
    .mark_bar()
    .encode(
        x=alt.X("value", type="quantitative", title=""),
        y=alt.Y("index", type="nominal", title=""),
        color=alt.Color("variable", type="nominal", title=""),
        order=alt.Order("variable", sort="descending"),
    )
)

st.altair_chart(chart, use_container_width=True)

Ouput

Best,
Snehan

[hahahazel]

Thank you very much.

One additional question: how do I change the text color? Currently, it is Black by default.

st.title('Hello World!')

I tried
st.title(‘Hello World!’, color = “purple”)
or
st.title(‘Hello World!’, color = "#)
or
st.title(‘

Hello World!

’)

All of them does not work.

[AvratanuBiswas]

Hi @hahahazel ,

Probably this might help ?

import streamlit as st
_text = "Hello World!"
_style = '<p style = "color: Purple; font-size: 36px; font-family:sans-serif">{}</p>'
st.markdown(_style.format(_text),unsafe_allow_html= True)

Best,
Avra

[hahahazel]

Thanks!

May I ask how to add header to the graph?
See screenshot for the graph. I want to add a header e.g. Probability of sensor detection

Here is my code

            chart = (
                alt.Chart(data)
                .mark_bar()
                .encode(
                    x=alt.X("value", type="quantitative", title="Probability"),
                    y=alt.Y("index", type="nominal", title="Category"),
                    #color=alt.Color("variable", type="nominal", title=""),
                    order=alt.Order("variable", sort="descending"),
                    )
                )
            st.altair_chart(chart, use_container_width=True)

[ngolos]

Hi @hahahazel it’s definitely too late to answer to your question, but anyway:
you can add title in miltiple way, inside altair after encodings in properties, you can set their height, width, title, subtitle, etc - .properties(height=300, title=“I am a chart”)
or just before the chart with st.title)