Dynamic Plotly charts for comfortable laptop AND mobile view of interactive charts?

📊 Plotly Python
1

Hi everyone, hi @adamschroeder,

I’m planning to make a blog to talk about stats/data analysis on environmental topics, and I’m planning to use Plotly to create some charts, some of which will be interactive. Since a lot of web traffic is generated via mobile phones, ideally the charts will have to be readable on both PCs and mobile.

I know about the ‘autosize’ argument, which helps, but my problems are the following:

  • The font within the charts is often the most problematic aspect; they are set to a certain size, and thus remain this size when viewed on mobile. How can I make the font dynamically adapt?
  • The chart itself, if it is quite big, remains a bit cramped, and navigating it (zooming scrolling etc) is complicated and makes it sometimes unusable on mobile. Are there ways to optimize the chart navigation?

I noticed several (official) websites including Plotly charts which are not really usable on mobile (e.g. here, here and here). Does it mean that it is an underlying limitation of Plotly charts? Does it also apply to all libraries building interactive charts in general?

Finally, would some CSS make it possible to improve the readability of Plotly charts? If so, would you have examples of scripts/commands to implement?

I realize that this is a lot of questions, but if anyone could help with at least some of them, that would be SO appreciated (that’s why they are in bold characters)! I have spent many days on these issues already, and not being a dev has its limits, so any help at all would be appreciated.

In case that’s helpful, here are two of my charts which are problematic on mobile:

https://plotly.com/~MichaelGauthier/4/

https://plotly.com/~MichaelGauthier/6/

If you need the scripts, just ask, I’ll share them happily.

Thanks again a million times, and apologies for the amount of questions, but I just need to know whether that is feasible or not for my project, and thus continue to spend time on it, or whether I should find alternative (less fancy) solutions right away!

2

HI @MitchBuchanon
Unfortunately, Plotly graphs are not fully adaptive to mobile yet. My best recommendation would be to limit the default margins around each plot to zero.
fig.update_layout(margin=dict(l=0, r=0, t=0, b=0))

1 Like
4

Thanks for your advice and encouragements!

About dynamic font: if I’m not mistaken (which I may very well be), Plotly only accepts floats or integers for font sizes, so how would you go about implementing relative units? I have seen this thread, which provides hints I will explore later this weekend, but do you have other approaches in mind?

About Plotly’s touch interaction features: a link would be very appreciated, as I seem unable to find clear resources of native Plotly features allowing to tweak these functionalities…

Here is the script of one of the charts for which the font is problematic. Note that I haven’t implemented Adam’s figure.update_layout’s advice yet:

df['Color'] = pd.cut(df['Value'], 
    bins=[0, 23.4, 46.8, 70.2, float("inf")],
    labels=['green', 'yellow', 'orange', 'red'],
    include_lowest=True)

fig = px.treemap(df, 
    path=['Area'], 
    values='Value', 
    color='Color', 
    color_discrete_map={'green': 'green', 'yellow': 'yellow', 'orange': 'orange','red': 'red'},
    title='Average Meat Consumption per Capita per Country in 2021',
    custom_data = ['Area', 'Value'],)

fig.update_layout(paper_bgcolor='black', plot_bgcolor='black', title=dict(text='<b>Average Meat Consumption per Capita per Country in 2021 (in kg)</b>', 
    font=dict(color='white'), y = 0.98), autosize = True,
    annotations=[
        dict(x=0,
            y=1.10,
            xref='paper',
            yref='paper',
            text='<i><span style="color: white;">Based on the <a href="https://reseauactionclimat.org/wp-content/uploads/2024/02/rac_alimentation-synthese-08-webpage.pdf" style="color: cyan; background-color: black; padding: 20px;">2024 recommendations</a> of the French "Programme National Nutrition Santé" of no more than 450g of meat per week / 23.4kg per year</i></span><br><b><span style="color: green;">Sustainable consumption</span></b>' '<b><span style="color: yellow; background-color: black; padding: 20px;"> Up to 2x the yearly limit</span></b>' '<b><span style="color: orange;"> Up to 3x the yearly limit</span></b>' '<b><span style="color: red;"> More than 3x the yearly limit</span></b><br><b><span style="color: white;"><a href="https://www.fao.org/faostat/en/#data/FBS" style="color: cyan; background-color: black; padding: 20px;">Data</a>: FAO (2024)</span></b>',
            align='left',
            showarrow=False,
            font=dict(size=12))   
    ])

fig.update_traces(
    hovertemplate="<br>".join([
        "%{customdata[0]}",
        "%{customdata[1]}"]))

fig.update_traces(
    hovertemplate=''  
)

py.plot(fig, filename='meat_consumption_English', auto_open=True)
fig.show()

This is the script corresponding to the first chart I linked above. If you need the dataset for it, don’t hesitate to tell me, I’ll try to share it here.

Any advice, on font, or anything else would be appreciated. I’m learning, so it’s probably far from optimized… ^^’

Thanks again, everyone, for your help! : )