search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.95k stars 1.86k forks source link

Plotly.js is not height responsive #5270

Closed MarcSkovMadsen closed 3 years ago

MarcSkovMadsen commented 3 years ago

I'm using Plotly.js via Python. I'm also a user of other plotting libraries like Bokeh, Vega/ Altair and Echarts. And I can see that the responsiveness functionality of plotly.js is just not as robust, fast and seamless as the others.

The one thing where I can point to a reproducible example right now is height responsiveness.

If you take the example at https://plotly.com/javascript/responsive-fluid-layout/ you can see its not height responsive.

This is a major problem if you want to make responsive layouts. For example for mobile. But also if you want to put Plotly inside resizable divs and similar.

plotly-not-resizable

MarcSkovMadsen commented 3 years ago

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

plot-not-responsive-streaming

Echarts also have a problems. But those where on Panels side and have been solved in the Panel Master branch.

MarcSkovMadsen commented 3 years ago

Additional Context 2

Another reproducible example can be found here https://github.com/holoviz/panel/issues/1770#issue-740981139

98850094-87da1000-2454-11eb-9c74-be10e8e5914c

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.

Erhannis commented 3 years ago

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.

MarcSkovMadsen commented 3 years ago

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