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"
}
}