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

📊 Plotly Python
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! : )