Download this notebook from GitHub (right-click to download).

import panel as pn

The ECharts pane renders Apache ECharts and pyecharts plots inside Panel. Note that to use the ECharts pane in the notebook the Panel extension has to be loaded with ‘echarts’ as an argument to ensure that echarts.js is initialized.


For layout and styling related parameters see the customization user guide.

  • object (dict): An ECharts plot specification expressed as a Python dictionary, which is then converted to JSON. Or a pyecharts chart like pyecharts.charts.Bar.

  • renderer (str): Whether to render with HTML ‘canvas’ (default) or ‘svg’

  • theme (str): Theme to apply to plots (one of ‘default’, ‘dark’, ‘light’)

Lets try the ECharts pane support for ECharts specs in its raw form (i.e. a dictionary), e.g. here we declare a bar plot:

echart = {
    'title': {
        'text': 'ECharts entry example'
    'tooltip': {},
    'legend': {
    'xAxis': {
        'data': ["shirt","cardign","chiffon shirt","pants","heels","socks"]
    'yAxis': {},
    'series': [{
        'name': 'Sales',
        'type': 'bar',
        'data': [5, 20, 36, 10, 10, 20]
echart_pane = pn.pane.ECharts(echart, height=480, width=640)

Like all other panes, the ECharts pane object can be updated, either in place and triggering an update:

echart['series'] = [dict(echart['series'][0], type= 'line')]

Vega specification can also be responsively sized by declaring the width or height to match the container:

responsive_spec = dict(echart, responsive=True)

pn.pane.ECharts(responsive_spec, height=400)

The ECharts pane also hass support for pyecharts. For example, we can pass a pyecharts.charts.Bar chart directly the ECharts pane.

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()

The ECharts library supports a wide range of chart types and since the plots are expressed using JSON datastructures we can easily update the data and then emit change events to update the charts:

gauge = {
    'tooltip': {
        'formatter': '{a} <br/>{b} : {c}%'
    'series': [
            'name': 'Gauge',
            'type': 'gauge',
            'detail': {'formatter': '{value}%'},
            'data': [{'value': 50, 'name': 'Value'}]
gauge_pane = pn.pane.ECharts(gauge, width=400, height=400)

slider = pn.widgets.IntSlider(start=0, end=100)

slider.jscallback(args={'gauge': gauge_pane}, value="""[0].data[0].value = cb_obj.value

pn.Column(slider, gauge_pane)


The EChart pane exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

pn.Row(gauge_pane.controls(jslink=True), gauge_pane)
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).