Mouse wheel scroll for zoom

[scrapeable]

I've gone through a good portion of the echarts4r docs as well as some of the echarts js exmaples. I've actually been using the AutoPlots package quite a bit as it provides a easy to use api for echarts4r.

Is there some js dependency I need to add to use my mouses scroll wheel to zoom in and out of a chart when I include dataZoom? For example in the below echarts code there isn't really anything I see that is being added that enables mouse wheel scroll, but I can use my mouse to scroll in and out of the zoom.

echarts (https://echarts.apache.org/examples/en/editor.html?c=grid-multiple)

// prettier-ignore
let timeData = [ too large ];
timeData = timeData.map(function (str) {
  return str.replace('2009/', '');
});
option = {
  title: {
    text: 'Rainfall vs Evaporation',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  legend: {
    data: ['Evaporation', 'Rainfall'],
    left: 10
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    },
    {
      type: 'inside',
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    }
  ],
  grid: [
    {
      left: 60,
      right: 50,
      height: '35%'
    },
    {
      left: 60,
      right: 50,
      top: '55%',
      height: '35%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: timeData
    },
    {
      gridIndex: 1,
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: timeData,
      position: 'top'
    }
  ],
  yAxis: [
    {
      name: 'Evaporation(m³/s)',
      type: 'value',
      max: 500
    },
    {
      gridIndex: 1,
      name: 'Rainfall(mm)',
      type: 'value',
      inverse: true
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'line',
      symbolSize: 8,
      // prettier-ignore
      data: [
               too large
            ]
    },
    {
      name: 'Rainfall',
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      // prettier-ignore
      data: [
                too large
            ]
    }
  ]
};

R (https://echarts4r.john-coene.com/articles/brush.html?q=zoom#zoom)

USArrests |> 
  e_charts(UrbanPop) |> 
  e_line(Assault) |> 
  e_area(Murder, y_index = 1, x_index = 1) |> 
  e_y_axis(gridIndex = 1) |>
  e_x_axis(gridIndex = 1) |> 
  e_grid(height = "35%") |> 
  e_grid(height = "35%", top = "50%") |> 
  e_datazoom(x_index = c(0, 1))

Yet with this R code chunk or any of the e_datazoom I use I'm unable to use my scroll wheel to zoom in and out. Thanks for such a great package echarts has everything I want from highcharts, while being much faster, easier to work with dates, and allows me to stay away from plotly.

[JohnCoene]

Thank you for the detailed question. I had never realised this. {echarts4r} defaults to type = "slider" which is a visible slider but the scroll only seem the work with type = "inside", you can achieve this as shown below: scrolling on one of the plots backgrounds will work.

e_datazoom(type = "inside", x_index = c(0, 1)) |> 
  e_datazoom(type = "slider", x_index = c(0, 1))

The JSON option you shared actually does the same.

[scrapeable]

Thanks this works perfectly! It might be a good idea to open the discussion section for this repo as I'm sure you get a decent amount of these issues that are more so questions... the number of questions I get unanswered on stackoverflow nowadays is >50%.

Either way appreciate the quick answer!

[AdrianAntico]

@JohnCoene Hi John, I just tested it out and it works great with a density plot for the single series case and the one with adding a group variable. However, when I apply faceting there is some inconsistent behavior. I tested a 2x2 facet density output and when I scrolled on the top left plot both the top left and top right scrolled. Also, when I tried to scroll on the bottom left or right, neither of them zoomed.

I'm unaware if this behavior can actually work or if the mouse scroll properties aren't getting applied somehow to each of the facet output plots, similarly to how there is one and not many legends for faceting. I flipped through the e_facet function briefly and I didn't really see anything that would cause the issue.

[JohnCoene]

@scrapeable sorry to hear this.

I get help from @munoztd0 and @rdatasculptor but since I've had little consulting work that requires {echarts4r} it's difficult for me to maintain and answer questions.

I'll think about this.

[JohnCoene]

@AdrianAntico can you share some example code, there may be a way to make this work but I don't know how many sliders, etc. you use.

echarts4r does not do much here: it's all handled by echarts.js

[AdrianAntico]

@JohnCoene Hi John, below is code to replicate the example I had mentioned in the previous comment. I have a feeling this is an Echarts.js issue but in case it isn't and there is a way to make this work, it would be pretty awesome.

# Create fake data
dt <- data.table::data.table(Y = runif(10000))
dt[, X := sample(LETTERS, size = 10000, replace = TRUE)]
data.table::setorderv(x = dt, cols = "X", 1)

# Restrict to four group levels for the 2x2 facet we'll eventually create
dt <- dt[X %in% c("A","B","C","D")]

# Create plot
p1 <- echarts4r::e_charts_(dt |> dplyr::group_by(X))
p1 <- echarts4r::e_density_(e = p1, "Y", areaStyle = list(opacity = .4), smooth = TRUE, y_index = 1)
p1 <- echarts4r::e_datazoom(e = p1, type = "inside", x_index = c(0,1))

# Mouse Scroll Zoom Works fine when groups are all on a single plot
p1

# Now add the faceting
p1 <- echarts4r::e_facet(e = p1, rows = 2, cols = 2, legend_space = 16, legend_pos = "top")

# View facet results
p1

# Notes:
# Mouse Scroll Zoom now is inconsistent
# Scroll on top left panel and both top left and roll zoom
# Scroll on botton left panel and neither zoom

[helgasoft]

x_index = c(0,1,2,3)

[AdrianAntico]

@helgasoft Thanks for the help!!