echarts4r and R Shiny: use of callbacks with grouped bar chart

Question

I am creating a grouped bar chart with echarts4r in a Shiny app. Each bar corresponds to a row in the data frame. I would like to display a table showing the row in a pop-up window that appears when I click on a bar.

In the minimal Shiny app below, I am using echarts4r callbacks to trigger an observer and to filter the data frame. I can filter by x2, but I don't know how to also filter by the grouping variable, x1. (The pop-up dialog is also triggered by clicking on the timeline; that's undesired but not critical.)

library(shiny)
library(echarts4r)
library(DT)

data <- tibble(
  x1 = c("A", "A", "B", "B", "C", "C"),
  x2 = c("d", "e", "d", "e", "d", "e"),
  y  = c(50, 100, 90, 40, 60, 60)
)


ui <- fluidPage(
  
  echarts4rOutput("chart")
 
)

server <- function(input, output) {
  
  observeEvent(input$chart_clicked_serie,{                  # *_clicked_serie is callback function
    
    output$table <- DT::renderDataTable({ 
      data %>% 
        filter(x2==input$chart_clicked_data$value[[1]]) %>% # *_clicked_data is callback function
        DT::datatable() 
    })
    showModal(modalDialog(DT::dataTableOutput("table")))
  })  

  output$chart <- renderEcharts4r({
    
    data %>% 
      group_by(x1) %>% 
      e_charts(x2, timeline = TRUE) %>% 
      e_bar(y)
  })
  
}

shinyApp(ui = ui, server = server)

UPDATED EXAMPLE that is closer to what I'm trying to do. I'm filtering by x2 and y and would also like to filter by x1.

library(shiny)
library(echarts4r)
library(DT)
library(tidyr)
library(dplyr)

data <- tibble(
  x1 = c(rep(c(rep("2021", 2), rep("2022", 2)), 3)),
  x2 = c(rep("Junior", 4), rep("Associate", 4), rep("Senior", 4)),
  y = rep(c("No", "Yes"), 6),
  N = runif(12, min=30, max=100)
)

ui <- fluidPage(
  echarts4rOutput("chart")
)

server <- function(input, output) {
  
  observeEvent(input$chart_clicked_serie,{  
    
    output$table <- DT::renderDataTable({
      data %>% 
        filter(x2 == input$chart_clicked_data$value[[1]] & y == input$chart_clicked_serie) %>% 
        DT::datatable()
    })
    showModal(modalDialog(DT::dataTableOutput("table")))
  })
  
  output$chart <- renderEcharts4r({
    df %>% 
      pivot_wider(names_from=y, values_from=N) %>% 
      group_by(x2) %>% 
      e_charts(., x1, timeline = TRUE) %>% 
      e_bar(No) %>%
      e_bar(Yes) %>% 
      e_color(c("#2774AE","#8BB8E8")) %>% 
      e_y_axis(
        name="N",
        min=0, 
        max=150
      )
  })
  
}

shinyApp(ui = ui, server = server)

Answer 1

Do you mean something like this: Here we reshape the data to long format, adpat the echarts4r code and the observer:

library(shiny)
library(echarts4r)
library(DT)
library(tidyr)
library(dplyr)

data <- tibble(
  x1 = c("A", "A", "B", "B", "C", "C"),
  x2 = c("d", "e", "d", "e", "d", "e"),
  y  = c(50, 100, 90, 40, 60, 60)
)

# Reshape data to wider format
data_wide <- data %>% 
  pivot_wider(names_from = x2, values_from = y)

ui <- fluidPage(
  echarts4rOutput("chart")
)

server <- function(input, output) {
  
  observeEvent(input$chart_clicked_serie,{                 
    output$table <- DT::renderDataTable({
      data %>% 
        filter(x1 == input$chart_clicked_data$name, x2 == input$chart_clicked_data$serieName) %>% 
        DT::datatable()
    })
    showModal(modalDialog(DT::dataTableOutput("table")))
  })
  
  output$chart <- renderEcharts4r({
    data_wide %>% 
      group_by(x1) %>%
      e_charts(x1, timeline = TRUE) %>% 
      e_bar(d, name = "d") %>% 
      e_bar(e, name = "e") %>% 
      e_legend() %>% 
      e_title("Grouped Bar Chart with Timeline")
  })
  
}

shinyApp(ui = ui, server = server)