How to give each grid its own axis maximum?

[rdatasculptor]

I am experimenting with giving charts in different grids in the same canvas its own x axis maximum. The end goal is to be able to switch between the charts using the legend.

Please take a look at this example:

library(dplyr)
library(echarts4r)

df <-
  structure(list(vargroup = c(
    "var2", "var2", "var2", "var2", "var2",
    "var1", "var3", "var2", "var2", "var1", "var2", "var3", "var2",
    "var1", "var2", "var1", "var2", "var1", "var2", "var2", "var2",
    "var2", "var2", "var3", "var2", "var3", "var2", "var2"
  ), number = c(
    "a",
    "b", "c", "d", "e", "a", "a", "f", "g", "b", "h", "b", "i", "c",
    "j", "d", "k", "e", "l", "m", "n", "o", "p", "c", "q", "d", "r",
    "s"
  ), var1 = c(
    NA, NA, NA, NA, NA, 3.5184375, NA, NA, NA, 3.4376,
    NA, NA, NA, 3.374825, NA, 3.3311875, NA, 3.2486, NA, NA, NA,
    NA, NA, NA, NA, NA, NA, NA
  ), var2 = c(
    3.8160625, 3.634625, 3.60995,
    3.591725, 3.5211375, NA, NA, 3.497625, 3.4877625, NA, 3.4288375,
    NA, 3.3883375, NA, 3.3548875, NA, 3.272925, NA, 3.2022125, 3.1912875,
    3.1718875, 3.1428625, 3.1393125, NA, 2.9507625, NA, 2.8642875,
    2.76795
  ), var3 = c(
    NA, NA, NA, NA, NA, NA, 3.5148625, NA, NA,
    NA, NA, 3.39235, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA, NA,
    3.0445375, NA, 2.89655, NA, NA
  )), row.names = c(NA, -28L), class = c(
    "tbl_df",
    "tbl", "data.frame"
  ))

df %>%
  filter(vargroup == "var2") %>%
  e_charts(number) %>%
  e_bar(var2,
    xAxisIndex = 0,
    yAxisIndex = 0
  ) %>%
  e_data(filter(df, vargroup == "var1")) %>%
  e_bar(var1,
    xAxisIndex = 1,
    yAxisIndex = 1
  ) %>%
  e_data(filter(df, vargroup == "var3")) %>%
  e_bar(var3,
    xAxisIndex = 2,
    yAxisIndex = 2
  ) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_x_axis(gridIndex = 0, show = FALSE, index = 0) %>%
  e_x_axis(gridIndex = 1, show = FALSE, index = 1) %>%
  e_x_axis(gridIndex = 2, show = FALSE, index = 2) %>%
  e_y_axis(gridIndex = 0, show = FALSE, index = 1) %>%
  e_y_axis(gridIndex = 1, show = FALSE, index = 2) %>%
  e_y_axis(gridIndex = 2, show = FALSE, index = 3) %>%
  e_legend(selectedMode = "single")

As you can see. the x axis takes the maximum of biggest chart. How can I give all the grids its own x axis maximum?

If I do something like this:

df %>%
  filter(vargroup == "var2") %>%
  e_charts(number) %>%
  e_bar(var2,
    xAxisIndex = 0,
    yAxisIndex = 0
  ) %>%
  e_data(filter(df, vargroup == "var1")) %>%
  e_bar(var1,
    xAxisIndex = 1,
    yAxisIndex = 1
  ) %>%
  e_data(filter(df, vargroup == "var3")) %>%
  e_bar(var3,
    xAxisIndex = 2,
    yAxisIndex = 2
  ) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_x_axis(gridIndex = 0, show = FALSE, index = 0) %>%
  e_x_axis(gridIndex = 1, show = FALSE, index = 1, max = "e") %>%
  e_x_axis(gridIndex = 2, show = FALSE, index = 2) %>%
  e_y_axis(gridIndex = 0, show = FALSE, index = 1) %>%
  e_y_axis(gridIndex = 1, show = FALSE, index = 2) %>%
  e_y_axis(gridIndex = 2, show = FALSE, index = 3) %>%
  e_legend(selectedMode = "single")

then all the x axes use the same max.

Is there a solution for this problem?

[rdatasculptor]

not sure why and how, but after a few adjustments I made it work:

df %>%
  filter(vargroup == "var2") %>%
  e_charts(number) %>%
  e_bar(var2,
        x_index = 0,
        y_index = 0
  ) %>%
  e_data(filter(df, vargroup == "var1")) %>%
  e_bar(var1,
        y_index = 1,
        x_index = 1
  ) %>%
  e_data(filter(df, vargroup == "var3")) %>%
  e_bar(var3,
        y_index = 2,
        x_index = 2
  ) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_grid(height = 400) %>%
  e_x_axis(gridIndex = 0, show = FALSE, index = 0) %>%
  e_x_axis(gridIndex = 1, show = FALSE, index = 1) %>%
  e_x_axis(gridIndex = 2, show = FALSE, index = 2) %>%
  e_y_axis(gridIndex = 0, show = TRUE, index = 0) %>%
  e_y_axis(gridIndex = 1, show = TRUE, index = 1) %>%
  e_y_axis(gridIndex = 2, show = TRUE, index = 2) %>%
  e_legend(selectedMode = "single")