Altair Chart x-axis not in order I want

🎈 Using Streamlit
,
1

Summary

Got basic dataframe with letters and scores. Now I want a graph (which I have) but when I add tooltips to my chart, the x-axis breaks for some reason. It might have to do with the types I use maybe but cant find the problem.

Code snippet:

import streamlit as st
import pandas as pd
import altair as alt
df = pd.DataFrame([['a', 0.2], ['b', 0.1], ['c', 0.8]],
                  columns=['Letters', 'Numbers'])
hover = alt.selection_single(
    fields=['Letters'],
    nearest=True,
    on='mouseover',
    empty='none',
)

f = alt.Chart(df).mark_line().encode(
    alt.X('Letters:N', sort=alt.EncodingSortField(
        field='Numbers',
        order='ascending'
    )),
    alt.Y('Numbers:Q')
)
points = f.transform_filter(hover).mark_circle(size=150)

tooltips = (
    alt.Chart(df)
    .mark_rule()
    .encode(
        x='Letters:N',
        y='Numbers:Q',
        opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
        tooltip=[
            alt.Tooltip('Letters', title='Entity'),
            alt.Tooltip('Numbers', title='Score'),
        ],
    )
    .add_selection(hover)
)
st.altair_chart((f).interactive(), use_container_width=True) # Good order, but want hovering system with tooltips
st.altair_chart((f+points+tooltips).interactive(), use_container_width=True) # Wrong x-axis order.

Expected behavior:

Want to be able to use tooltips+hovering AND right x-axis.

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.