Plotly_chart displays index names that do not exists

Summary

I have an app that plots several charts according to the user selected options. The selected options change the way data is treated (ex: different index columns, apply diff, groupby, etc). After a few changes the st.plotly_chart function appears to have cached data, since it displays data on the y-axis that do not exists anymore. See the chart:

These null bar do not exists on the plotly figure created. To understand the problem i’ve saved the plot figure in a json and used: st.plotly_chart(plotly.io.read_json(‘figure.json’)) to show the plot.

The json DO NOT HAVE these values on the y-axis/x-axis. I’ve tried to read and plot the same file on a different streamlit page (using streamlit multi pages and a different app run) and the chart is exactly the way it should be:

The json:

{
    "data": [
        {
            "marker": {
                "color": "#1D57A5"
            },
            "orientation": "h",
            "showlegend": false,
            "x": [
                120.1380999999999,
                106.06296666666667,
                315.50575,
                60.151150000000015,
                1.4062199999999963,
                93.94610000000003,
                40.326899999999995,
                -248.98569999999995,
                -57.8537
            ],
            "y": [
                "axistitle1",
                "axistitle2",
                "axistitle3",
                "axistitle4",
                "axistitle5",
                "axistitle6",
                "axistitle7",
                "axistitle8",
                "axistitle9"
            ],
            "type": "bar"
        }
    ],
    "layout": {
        "template": {
            "layout": {
                "colorway": [
                    "#1D57A5",
                    "#00B5E2",
                    "#b8b6b6",
                    "#e30b0b",
                    "#141414",
                    " #fca605",
                    "#0ac200",
                    "#4285F4",
                    "#A6771E",
                    "#F4B400",
                    "#0F9D58",
                    "#185ABC",
                    "#B31412",
                    "#EA8600",
                    "#137333",
                    "#d2e3fc",
                    "#ceead6"
                ]
            }
        },
        "yaxis": {
            "categoryorder": "total ascending",
            "tickfont": {
                "size": 21
            },
            "mirror": true,
            "ticks": "outside",
            "showline": true
        },
        "xaxis": {
            "tickfont": {
                "size": 21
            },
            "title": {
                "text": "X-axis"
            },
            "mirror": true,
            "ticks": "outside",
            "showline": true
        },
        "margin": {
            "l": 300
        },
        "title": {
            "text": "<b>X-Axis | 5Y</b><br><sup>Date Ref: date_ref</sup>",
            "font": {
                "size": 24
            }
        },
        "font": {
            "size": 20
        },
        "autosize": false,
        "width": 2000,
        "height": 1000,
        "showlegend": true,
        "paper_bgcolor": "#fafafa",
        "plot_bgcolor": "#fafafa"
    }
}
2 Likes

Thanks for bringing this one up, just noticed this bug with Streamlit 1.16.0! Hope it gets fixed soon.

2 Likes

It seems that the updates made to Plotly and Altair behavior in 1.16 may have had a number of unintended and undesirable consequences. See also: Streamlit 1.16 forces unwanted Altair tooltips with no option to disable

2 Likes

This problem continues in streamlit 1.16, but it was already there on streamlit 1.12. I’ve opened an issue on github: plotly_chart using cached data on axis · Issue #5902 · streamlit/streamlit · GitHub

2 Likes

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