Common wheel zoom in pyecharts grid chart

Question

In pyecharts, I create a grid with two graphs having the same x-axis. I'd like to be able to zoom both at the same time using mouse wheel. It works on the single graph using datazoom_opts=[opts.DataZoomOpts(type_="inside")], but I couldn't find a way to have something similar in Grid.

In javascript echarts library there's echarts.connect method that seems to do this (e.g. echarts.connect([chart1, chart2]);) but it doesn't seem to exist in pyecharts.

Please, see below a minimal functional example:

from pyecharts import options as opts
from pyecharts.charts import Bar, Grid

# if you're using jupyter lab
from pyecharts.globals import CurrentConfig, NotebookType
CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_LAB
CurrentConfig.ONLINE_HOST

from random import randrange
x=list(range(0,100))

a = Bar()
a.add_xaxis(x)
a.add_yaxis("ax", [randrange(100) for x in range(0,100)])
a.set_global_opts(
    title_opts=opts.TitleOpts(title="Bar-a"),
    datazoom_opts=[opts.DataZoomOpts(type_="inside")],)

b = Bar()
b.add_xaxis(x)
b.add_yaxis("bx", [randrange(100) for x in range(0,100)])
b.set_global_opts(
    title_opts=opts.TitleOpts(title="Bar-b"),
    datazoom_opts=[opts.DataZoomOpts(type_="inside")],)

gr = Grid()
gr.add(a, grid_opts=opts.GridOpts(height="30%"))
gr.add(b, grid_opts=opts.GridOpts(pos_top="50%", height="30%"))

gr.render_notebook()

I can zoom in and out the first graph (a) using mouse wheel. The second is static. I want to zoom both keeping them aligned.

Answer 1

I dont know how exactly it is done in pyecharts but in echarts you can create multiple grid instances within the same chart and specify which axes should be in which grid and which axes should be controlled by the zoom. See this official example.

The property xaxis_index of DataZoomOpts in the pyecharts documentation indicates that this should be possible too. GridOpts can be found here. And this example using multiple grids might also be helpful. It is just missing the dataZoom.

Minimal echarts example:

const data = [[1,120], [2,200], [3,150], [4,80], [5,70], [6,110], [7,130]];

option = {
  grid: [{bottom: '52%'},{top: '52%'}],
  xAxis: [{},{gridIndex: 1}],
  yAxis: [{},{gridIndex: 1}],
  dataZoom: {xAxisIndex: [0,1]},
  series: [
    {
      type: 'bar',
      data: data
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: data
    }
  ]
};

EDIT:

Matthias Mertens pointed me in the right direction. Here's is the python code edited to have both graphs reacting to mouse wheel zoom. Please see comments in code.

from pyecharts import options as opts
from pyecharts.charts import Bar, Grid

# if you're using jupyter lab
from pyecharts.globals import CurrentConfig, NotebookType
CurrentConfig.NOTEBOOK_TYPE = NotebookType.JUPYTER_LAB
CurrentConfig.ONLINE_HOST

from random import randrange
x=list(range(0,100))

a = Bar()
a.add_xaxis(x)
a.add_yaxis("ax", [randrange(100) for x in range(0,100)], yaxis_index=1)
# DataZoomOpts can be set here and are valid for graph "b" also.
# Or they can be set after Grid creation as below
#a.set_global_opts(
#    title_opts=opts.TitleOpts(title="Bar-a"),
#    datazoom_opts=[opts.DataZoomOpts(type_="inside", xaxis_index=[0, 1])],)

b = Bar()
b.add_xaxis(x)
b.add_yaxis("bx", [randrange(100) for x in range(0,100)], yaxis_index=2)
#Not necessary to set DataZoomOpts here

gr = Grid()
gr.add(a, grid_opts=opts.GridOpts(height="30%"))
gr.add(b, grid_opts=opts.GridOpts(pos_top="50%", height="30%"))

# DataZoomOpts set directly on options Dictionary for xaxis_index of
# both graphs [0, 1]
gr.options['dataZoom'] = opts.DataZoomOpts(type_='inside', xaxis_index=[0, 1])

gr.render_notebook()