I made an Altair interactive plot which contains several subplots with cross-filtering and save it as an html file. When opened on computer browsers, everything works fine. But on my phone and tablet, the plot becomes static (both Android Chrome and Firefox). Is there a way to make it work on these platforms?
Reproducible code
import altair as alt
from vega_datasets import data
cars = data.cars()
interval = alt.selection_interval()
base = alt.Chart(cars).mark_point().encode(
y='Horsepower',
color=alt.condition(interval, 'Origin', alt.value('lightgray')),
tooltip='Name'
).add_selection(
interval
)
hist = alt.Chart(cars).mark_bar().encode(
x='count()',
y='Origin',
color='Origin'
).properties(
width=800,
height=80
).transform_filter(
interval
)
scatter = base.encode(x='Miles_per_Gallon') | base.encode(x='Acceleration')
chart = scatter & hist
chart.display(renderer='svg')
chart.save('chart.html', scale_factor=3)
<iframe src="https://chart.tiiny.site/" style="width: 100%; height: 1000px;">
</iframe>This is an open issue in Vega-Lite, the library used to render Altair charts: https://github.com/vega/vega-lite/issues/4661
That issue has a few suggestions for workarounds related to interactions via touchscreens, but there is not yet any full solution to your question.