Plotly.js is not height responsive #5270

Activity

1. MarcSkovMadsen commented on Nov 13, 2020

   

   MarcSkovMadsen

   on Nov 13, 2020

   Author

   More actions

   Additional Context

   You can experiment with the behavior of Plotly vs other plotting libraries here.

   App: https://awesome-panel.org/streaming-plots
   Code: https://github.com/MarcSkovMadsen/awesome-panel/blob/master/application/pages/streaming_plots/streaming_plots.py

   

   Echarts also have a problems. But those where on Panels side and have been solved in the Panel Master branch.
2. MarcSkovMadsen commented on Nov 13, 2020

   

   MarcSkovMadsen

   on Nov 13, 2020

   Last edited by MarcSkovMadsen

   Author

   More actions

   Additional Context 2

   Another reproducible example can be found here holoviz/panel#1770 (comment)

   

   import numpy as np
   import altair as alt
   import pandas as pd
   import panel as pn
   from streamz.dataframe import DataFrame as sDataFrame
   import hvplot.pandas
   import plotly.express as px
   
   plotly_pane = pn.pane.Plotly(sizing_mode="stretch_both", config={'responsive': True})
   
   def update_plotly(data):
       data = pd.concat(data).reset_index()
       plot = px.line(data, y="y", title='Plotly', template="plotly_dark")
       plot.layout.autosize=True
       plotly_pane.object = plot
   
   df = sDataFrame(example=pd.DataFrame({"y": []}, index=pd.DatetimeIndex([])))
   window_stream = df.cumsum().stream.sliding_window(50)
   
   plotly_sink = window_stream.sink(update_plotly)
   
   def emit():
       df.emit(pd.DataFrame({"y": [np.random.randn()]}, index=pd.DatetimeIndex([pd.datetime.now()])))
   emit()
   pn.state.add_periodic_callback(emit, period=100, count=500)
   
   layout = pn.template.ReactTemplate(
       site="Awesome Panel",
       title="Streaming w. Echarts",
       theme=pn.template.react.DarkTheme,
       row_height=200,
   )
   layout.main[0:2, 0:6]=pn.layout.Card(plotly_pane, header="PLOTLY", sizing_mode="stretch_both")
   layout.servable()

   run the file with panel serve FILENAME.PY.
3. MarcSkovMadsen

   changed the title [-]Plot.js is not height responsive[/-] [+]Plotly.js is not height responsive[/+] on Nov 13, 2020
4. Erhannis commented on Dec 3, 2020

   

   Erhannis

   on Dec 3, 2020

   Last edited by Erhannis

   More actions

   I think the problem is that the div's height wraps to its contents. If I open the debugger (specifically on the codepen of one of the examples) and set height to 100% on the plot div, and every element above it (back up to and including <html>), the plot does resize height.

   👍React with 👍4Reacted by Marc Skov Madsen, Daniel Garcia Sanchez, Ajay Dhami and Tom Anderson
5. MarcSkovMadsen commented on Dec 4, 2020

   

   MarcSkovMadsen

   on Dec 4, 2020

   Author

   More actions

   Thanks. I can see adding height 100% is the solution. Thanks
6. MarcSkovMadsen

   closed this as completedon Dec 4, 2020
7. rl-utility-man

   added a commit that references this issue on May 6, 2026

   show how to make the output in the Jinja2 example responsive

   ...

   09aa8ba