Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Plotly plot in Plotly Pane inside Card does not work well. #1770

Closed
MarcSkovMadsen opened this issue Nov 11, 2020 · 3 comments · Fixed by #1780
Closed

Plotly plot in Plotly Pane inside Card does not work well. #1770

MarcSkovMadsen opened this issue Nov 11, 2020 · 3 comments · Fixed by #1780
Labels
TRIAGE Default label for untriaged issues

Comments

@MarcSkovMadsen
Copy link
Collaborator

Panel 0.10.1

I'm trying to create a demo streaming app with the different plotting libraries supported by Panel. I can see that the Plotly plot does not (re-)size well inside a card. And furthermore does not work responsively in the ReactTemplate.

plotly_card

Minimum reproducible example

image

image

image

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()
@MarcSkovMadsen MarcSkovMadsen added the TRIAGE Default label for untriaged issues label Nov 11, 2020
@MarcSkovMadsen MarcSkovMadsen mentioned this issue Nov 12, 2020
Open
@xavArtley
Copy link
Collaborator

xavArtley commented Nov 12, 2020 •
edited
Loading

From what I see it's more a plotly problem. It seems like plotly is not height responsive
https://plotly.com/javascript/responsive-fluid-layout/
I tried the codepen from the doc and the height doen not appear to change

@MarcSkovMadsen
Copy link
Collaborator Author

MarcSkovMadsen commented Nov 13, 2020 •
edited
Loading

Thanks @xavArtley

Regarding the missing height responsiveness of Plotly.js I've created an issue here plotly/plotly.js#5270.

I can see that there are some technical discussions on the (lack of) responsiveness here

Maybe somebody more technically skilled than me can find a solution some day. That might also solve

I am thinking how to handle this. Because a new user of Panel would not know or care that it really is Plotly.js that is the issue. Should we put a small comment in the Plotly pane reference guide that Plotly is not height responsive and the the responsiveness of plotly overall is not that great?

Additional Context

https://plotly.com/javascript/responsive-fluid-layout/

plotly-not-resizable

https://awesome-panel.org/streaming-plots

plot-not-responsive-streaming

@MarcSkovMadsen MarcSkovMadsen mentioned this issue Nov 13, 2020
Closed
@jonmmease
Copy link
Collaborator

Here's an example that builds a width/height responsive plotly.js figure. This is a cleaned up version of the output of plotly.io.write_html.

<html>
<head><meta charset="utf-8"/></head>
<body>
    <div>
        <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <div id="0c689639-14e5-46c8-bb86-7c8fe6f132c6" class="plotly-graph-div" style="height:100%; width:100%;"></div>
        <script type="text/javascript">
            window.PLOTLYENV=window.PLOTLYENV || {};                                    
            if (document.getElementById("0c689639-14e5-46c8-bb86-7c8fe6f132c6")) {
                Plotly.newPlot(
                    "0c689639-14e5-46c8-bb86-7c8fe6f132c6",  // elemend id
                    [{"type": "scatter", "y": [1, 3, 2]}],   // figure.data
                    {"title": {"text": "Fig title"}},        // figure.layout
                    {"responsive": true}                     // figure.config
                )
            };
        </script>
    </div>
</body>
</html>

responsive_figure

As I recall, I think it was important to explicitly set the width and height of the div enclosing the figure to 100%.

@xavArtley xavArtley mentioned this issue Nov 13, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
TRIAGE Default label for untriaged issues
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Plotly reactive height holoviz/panel
3 participants
@jonmmease @xavArtley @MarcSkovMadsen