Set up responsive mode on echarts

Panel
1

Hi;

I’m testing echarts for one of my dashboard. But I could not set responsive mode when I use pyechart example in ECharts — Panel v0.14.0. If you can help me on this topic, I will be grateful…

from pyecharts.charts import Bar

bar1 = pn.widgets.IntSlider(start=1, end=100, value=50)
bar2 = pn.widgets.IntSlider(start=1, end=100, value=50)

@pn.depends(bar1.param.value, bar2.param.value)
def plot(bar1, bar2):
    my_plot= (Bar()
        .add_xaxis(['Helicoptors', 'Planes'])
        .add_yaxis('Total In Flight', [bar1, bar2])
    )
    return pn.pane.ECharts(my_plot, width=500, height=250)
pn.Row(pn.Column(bar1, bar2), plot).servable()

Thanks in advance.

2

Hi. does it mean there is no way to do? In documentation, it can be set if pyechart is not preferred. I think it should be easy. but I could not find a way.

3

Hi @nemesis

Unfortunately pyecharts does not support the responsive setting. So you will have to find a work around.

This works

image
image2043×625 15.9 KB 

import json

import panel as pn
from pyecharts.charts import Bar

bar1 = pn.widgets.IntSlider(start=1, end=100, value=50)
bar2 = pn.widgets.IntSlider(start=1, end=100, value=50)

@pn.depends(bar1.param.value, bar2.param.value)
def plot(bar1, bar2):
    my_plot= (Bar()
        .add_xaxis(['Helicoptors', 'Planes'])
        .add_yaxis('Total In Flight', [bar1, bar2])
    )

    my_plot.options["responsive"] = True
    my_plot = json.loads(my_plot.dump_options())
    return pn.pane.ECharts(my_plot, height=500, sizing_mode="stretch_width")

pn.Row(pn.Column(bar1, bar2), plot).servable()

It’s always a good idea to consult awesome-panel.org. It contains working examples end to end that handles responsiveness and themes. More specifically consult the app gallery and filter on your framework of interest Awesome Panel | Gallery.

image

1 Like
4

Hi Marc,

Thanks for your prompt answer. Indeed I’m aware of your site. I’m following you a lot. I also like highcharts a lot. Examples in awesome-panel are very good examples. When I got stuck, I’m checking your examples. But this does not work for me.

But for panel version 0.13, it works. is there any know version specific problem?

I also have another problem. pyecharts-gallery/liquid_data_precision.py at master · pyecharts/pyecharts-gallery · GitHub. I need to use formatter. But when I add javascript, json load and dump_option is throwing error.
I checked pycharts documentation. They did not update pychart documentation for a while. (or I did not find the up-to-date documentation) But in GitHub, I can see examples are up-to-date.

My third question is about events. Is it possible to use click event of pycharts or echarts in panel?

Thanks for your help in advance.

1 Like
5

Hi @nemesis

Thanks

  1. For me the example works with Panel 0.14.0.
  2. Using javascript etc will probably not work. I would love it to do. Could you make a feature request?
  3. using events does not work. There is a Feature request here Events support for Panel Echarts · Issue #2147 · holoviz/panel (github.com). Could you upvote it?
6

@Marc Thanks. I opened a feature request.

1 Like