`e_arrange()` causes scrolling in RStudio 'Viewer' pane

[jack-davison]

Hello! Easiest to describe this in comparison to {plotly}, which flows to fill the viewer area in RStudio.

test <- data.frame(x = letters, y = 1:26)

plotly <-
  plotly::plot_ly(test, x = ~x, y = ~y) |>
  plotly::add_bars()

plotly::subplot(plotly, plotly, nrows = 2)

{echarts4r} appears to fix the heights of plots in e_arrange(), meaning you end up needing to scroll:

echarts <-
  echarts4r::e_charts(test, x) |>
  echarts4r::e_bar(y)

echarts4r::e_arrange(echarts, echarts, rows = 2)

I don't know if it is at all possible to make e_arrange() outputs 'fluid' in this way? I note that a single echart on its own resizes to fit the viewer box, the behaviour seems to go away when its arranged with other charts.

Thanks!
Jack

[patrekieta]

This issue appears to be an inherent limitation of how e_arrange() works. This is due to the returned object from each function. Plotly's subplot() returns a plotly object which is a combination of the two graphs. This allows it to properly size to the viewer pane window. However, e_arrange() returns an html div as a shiny.tag object.

Please be aware that the documentation for e_arrange() does warn you about the function not working properly with the viewer pane.

In order to overcome the issues with e_arrange() we will need to keep our two graphs together as an actual echarts4r object. Below are some potential options for how you can achieve what you are looking for.

Using e_arrange(), we can manually set the height to fit within the viewer pane. You could absolutely mess with the html styling options within this div to make it properly conform to the fluid height of the viewer pane. The default height for the e_arrange() output is 1000px.

test <- data.frame(x = letters, y = 1:26)

echarts <-
  echarts4r::e_charts(test, x, height = "250") |>
  echarts4r::e_bar(y)

echarts4r::e_arrange(echarts, echarts, rows = 2) 

Another option would be to hack a solution using the existing e_facet() function. This would require you to reformat your data so it generates two distinct graphs.

test <- data.frame(x = letters, y = 1:26, group = 0)
test2 <- data.frame(x = letters, y = 1:26, group = 1)
test3 <- rbind(test,test2)

test3 |> group_by(group) |> e_charts(x) |> e_bar(y) |> e_facet(rows = 2, cols = 1)

The last solution would be to use the new matrix functionality from v6 to manually place the graphs in the matrix panels. This is future functionality available in this upcoming PR (#675)

test <- data.frame(x = letters, y = 1:26)

echarts <-
  echarts4r::e_charts(test, x) |>
  echarts4r::e_bar(y)

e_matrix_raw(rows = 2, 
                  cols = 1, 
                  backgroundStyle=list(borderWidth=0), 
                  body = list(itemStyle = list(borderWidth = 0))) |> 
  e_matrix_addChart(echarts, coord = c(0,0), id = "chart1") |> 
  e_matrix_addChart(echarts, coord = c(0,1), id = "chart2")

I hope this is helpful. Don't hesitate to reach out if you have follow up questions related to this issue.

[jack-davison]

Hi Patrick,

Thanks very much for your very detailed reply!

I think for my use-case the matrix approach may be the most useful! I hope that PR progresses nicely - it seems to contain a lot of fixes for a lot of things!

Though I note that you can end up with legends clipping with the axes when using the matrix option:

[patrekieta]

Thank you for the kind words and I'm glad you found the reply useful. If you are interested in using the matrix approach to solve this issue, there are a couple solutions I can offer. The most obvious solution (and least helpful) is to simply remove the legends using Legend = FALSE as an argument in e_matrix_addChart(). The better solution is to use the margin_trbl argument in e_matrix_addChart() which allows you to adjust the margins of each graph that you add into the matrix.

To do this, we will adjust both graphs using the code below:

e_matrix_raw(rows = 2, 
                  cols = 1, 
                  backgroundStyle=list(borderWidth=0), 
                  body = list(itemStyle = list(borderWidth = 0))) |> 
  e_matrix_addChart(echarts, coord = c(0,0), id = "chart1", margin_trbl = c(b = "20%")) |> 
  e_matrix_addChart(echarts, coord = c(0,1), id = "chart2", margin_trbl = c(b = "20%"))

You can adjust every side using b, t, r, or l within the margin_trbl to help achieve your desired result. An important note is that different percents will work best for different window sizes. margin_trbl is also available in e_facet() if you are interested in that approach.

I hope this helps and don't hesitate to reach out with any questions or concerns.