Echarts not working in Card

[MarcSkovMadsen]

Panel 0.10.1

I would like to develop a streaming app with Echarts and other plotting libraries. In order to structure the app I would like to put the Echarts pane inside a card. But this does not work.

The problem is that when I first minimize and the maximize the card the ECharts plot is no longer shown.

screenshot

Code

import numpy as np
import pandas as pd
import panel as pn
import hvplot.pandas

echarts_pane = pn.pane.ECharts(sizing_mode="stretch_both")


def update_echarts(data):
    data = pd.concat(data).reset_index()
    plot = {
        "xAxis": {
            "type": 'category',
            "data": list(data.index.values)
        },
        "yAxis": {
            "type": 'value'
        },
        "series": [{
            "data": list(data["y"]),
            "type": 'line',
            "showSymbol": False,
            "hoverAnimation": False,
        },
        ],
        "responsive": True
    }
    echarts_pane.object = plot

def emit(*args):
    data=[pd.DataFrame({"y": [np.random.randn()]}, index=pd.DatetimeIndex([pd.datetime.now()])) for i in range(0,50)]
    update_echarts(data)
emit()

emit_button = pn.widgets.Button(name="EMIT")
emit_button.on_click(emit)
layout = pn.layout.Card(echarts_pane, header="ECHARTS", sizing_mode="stretch_both")
layout.servable()

[adiladawi]

i believe im having the same issue
the chart disappears and the card doesnt collapse

and when chart is showing, the position of the chart is at the bottom of the card and it doesnt confine itself within the area of the card

the same goes for other layouts too (Row, Column)

VID_20210318_040741.mp4

Panel 0.11.1 , React Template