Basics

Since version 0.1.2 you can connect multiple two charts together which might make it even easier. Below we create two charts, with e_datazoom, hiding one of the latter. On the second chart we run e_connect to connect it with the other; sliders are now linked.

You can link charts together in two different ways, one with e_connect by refering other charts’s id (elementId)

You can browse the above from your console like so.

e_arrange(e1, e2, e3)

The package natively links interactions, therefore, in the following the legend is acutally unique, one legend will trigger on both charts because they bear the same name.

You can connect pretty much anything, including geospatial visualisations, it’ll work as long as they share one or more thing in common (i.e.: serie name).

library(echarts4r.maps)

USArrests$state <- row.names(USArrests)

e8 <- USArrests %>% 
  e_charts(state, elementId = "US") %>%
  em_map("USA") %>% 
  e_map_3d(Murder, map = "USA", name = "Murder", boxWidth = 70) %>% 
  e_visual_map(Murder)

# this is made up
UK <- data.frame(
  kingdoms = c("England", "Wales", "Nothern Ireland", "Scotland"),
  murder = c(.8, 5, 13.2, 17.4)
)

e9 <- UK %>% 
  e_charts(kingdoms) %>%
  em_map("United_Kingdom") %>% 
  e_map_3d(murder, map = "United_Kingdom", name = "Murder", boxWidth = 50) %>% 
  e_visual_map(murder, show = FALSE) %>% 
  e_connect("US")

e_arrange(e8, e9, cols = 2, rows = 1)

On the geo-spatial visualisations above you can slide the visual map to filter states/kingdoms (because e_visual_map defaults to calculable = TRUE).

Shiny

There is no need for e_arrange in Shiny, though e_connect and e_arrange work hand in hand you can use one without the other. In fact you don’t truly have to use e_arrange in R markdown either.

Once the charts are connected they don’t need to be side by side.

library(shiny)
library(echarts4r)

ui <- fluidPage(
  fluidRow(
  column(5, echarts4rOutput("plot1")),
  column(2, "Charts are connected, no need for", code("e_arrange")),
  column(5, echarts4rOutput("plot2"))
  )
)

server <- function(input, output, session) {
  
  output$plot1 <- renderEcharts4r({
    cars %>% 
      e_charts(
        speed,
        height = 200
      ) %>% 
      e_scatter(dist, name = "legend") %>% 
      e_datazoom(show = FALSE, y_index = 0) %>% 
      e_group("grp")
  })
  
  output$plot2 <- renderEcharts4r({
    cars %>% 
      e_charts(
        dist,
        height = 200
      ) %>% 
      e_scatter(speed, name = "legend") %>% 
      e_datazoom(y_index = 0) %>% 
      e_group("grp") %>%  # assign group
      e_connect_group("grp")
  })
  
}

shinyApp(ui, server)