Move/pan and zoom in all charts?

🎈 Using Streamlit
1

With some components, we can move / zoom / pan in charts, example : st.line_chart - Streamlit Docs

With some others, we can move, but only vertically and not horizontally: st.bar_chart - Streamlit Docs

In some others, it’s impossible to move the X / Y axis (drag and drop on the chart doesn’t work):

(both come from the demo gallery)

Why is there a difference?

How to enable drag’n’drop move and wheelmouse zoom on these two last charts?

PS: what’s the name of the Javascript chart renderer? (Is it based on Bokeh or some other project, or 100% written from scratch for the Streamlit project?)

2

Streamlit is using altair for its default plotting capabilities.

3

Thanks! I looked at Customizing Visualizations — Vega-Altair 5.2.0 documentation and by default, it seems altair doesn’t provide mousewheel zoom and drag-and-drop move/pan.
Does this mean altair-produced charts are static images and not allowing user interaction with Javascript? (It seems GitHub - altair-viz/altair: Declarative statistical visualization library for Python doesn’t include any Javascript code)

As a comparison, st.line_chart has zooming / moving features. Which engine does it use? I guess, not altair?

4

You can zoom in altair, you have to call the .interactive method. Panning etc. should be possible too.
I used it once in one of my projects and got it to work. Unfortunatelly, I don’t have any code at hand right now.

You might get something out of this: Interactivity and Selections — Altair Tutorial
Also have a look at this: Interactive Charts — Vega-Altair 5.2.0 documentation

I believe st.line_chart is using altair as well, because the docs say:

This is syntax-sugar around st.altair_chart.

5

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