EChart collapses when nested in a row element about nicegui HOT 6 CLOSED

I see the div id 'c10' created correctly under row element id c7 but it is not displayed in browser. When the div id c10 is not under c7, chart is displayed in the browser.

EDIT: This is due to default height & width of echart when displaying under a container element. I provided min-width & min-height to row element, now I can see the chart.

r1=ui.row().style('min-height:250px;min-width:450px')
with r1:
    ec=ui.echart({'xAxis':{},'yAxis': {},'series': [{'type': 'line', 'data': []},{'type': 'line', 'data': [1,2,3]}]}).style('height:250px;width:650px')

from nicegui.

Hi @mswastik, thanks for bringing this up!

We also had problems with ECharts in flexboxes like ui.row. It might be related to apache/echarts#11791, but I'm not sure. So far I couldn't come up with a simple workaround.

If anyone has an idea how to work around or fix this problem, we're all ears!

from nicegui.

I was able to view echart by manually specifying row min-height & min-width as mentioned above.

from nicegui.

@mswastik Yes, that might work in certain cases. But as soon as you add a second chart, they resize strangely when resizing the browser window.

from nicegui.

ok, maybe you can try experimenting with tailwind classes as a workaround.

from nicegui.

I think I finally understand the original problem:

• ui.echart comes with "width: 100%" by default. That means it gets the width from its parent container.
• ui.row is a flexbox with an undefined width.
• Because the nested ui.echart has a minimum width of 0, the ui.row shrinks to this size.

To avoid this problem, you can either set a width or minimum width on the ui.echart or on the ui.row:

with ui.row().classes('w-full'):
    ui.echart({'xAxis': {}, 'yAxis': {}, 'series': [{'type': 'line', 'data': [1, 2, 3]}]})

from nicegui.