Line chart functionalities

[Varun_Kalyan]

How to add the glider line to the line charts. I see no references in streamlit documentation?

Image source: https://state-of-llm.streamlit.app/?utm_source=social&utm_medium=banner-forum&utm_campaign=state-of-llm-apps#are-chatbots-the-future

[dataprofessor]

Hi @Varun_Kalyan

Here’s the code that I used to create the above plot:

# Plotting
# Create a selection that chooses the nearest point & selects based on x-value
chat_nearest = alt.selection(type='single', nearest=True, on='mouseover',
                                fields=['WEEK_START'], empty='none')
        
# The basic line
chat_line = alt.Chart(df_weekly_chat_app).mark_line(interpolate='linear').encode(
                    x=alt.X("WEEK_START:T", axis=alt.Axis(title="Week Start", titlePadding=15,  titleFontSize=20, titleFontWeight=900, labelAngle=-90), scale=alt.Scale(padding=32)),
                    y=alt.Y("WEEKLY_APP_PCT:Q", axis=alt.Axis(title=y_title, titlePadding=15, titleFontSize=20, titleFontWeight=900, format=y_format)),
                                     color=alt.Color('APP_TYPE:N',
                                     scale=alt.Scale(domain=['single text input', 'chat']),
                                     legend=alt.Legend(title=" ") ))
        
# Transparent selectors across the chart. This is what tells us the x-value of the cursor
chat_selectors = alt.Chart(df_weekly_chat_app).mark_point().encode(x='WEEK_START:T', opacity=alt.value(0),).add_selection(chat_nearest)
        
# Draw points on the line, and highlight based on selection
chat_points = chat_line.mark_point().encode(opacity=alt.condition(chat_nearest, alt.value(1), alt.value(0)))
        
# Draw text labels near the points, and highlight based on selection
chat_text = chat_line.mark_text(align='left', dx=0, dy=-15, fontSize=16).encode(text=alt.condition(chat_nearest, alt_text, alt.value(' ')))
        
# Draw a rule at the location of the selection
chat_rules = alt.Chart(df_weekly_chat_app).mark_rule(color='gray').encode(x='WEEK_START:T',).transform_filter(chat_nearest)
        
# Put the five layers into a chart and bind the data
chat_count = alt.layer(chat_line, chat_selectors, chat_points, chat_rules, chat_text
        ).properties(width=800, height=500
        ).configure(padding=20, background="#111111"
        ).configure_legend(orient='bottom', titleFontSize=16, labelFontSize=14, titlePadding=0
        ).configure_axis(labelFontSize=14)
    
st.altair_chart(chat_count, use_container_width=True)

Hope this helps!

[Varun_Kalyan]

Hey @dataprofessor !
This works but i have way too many line charts in my application. I have 14 line charts.
Been trying to make it a function but does not work.
Something like
Def create_lineChart_withlines(df,x=‘Month’,use_column_width=TRUE)

[dataprofessor]

Glad to hear that it works

If you need help with making the charts into a function, could you create a new post and share the relevant code that you’d like to use.