R | ECharts | dynamic resize with echarty

shiny.resize.R

# https://echarts.apache.org/en/api.html#echartsInstance.resize
# https://echarts.apache.org/examples/en/editor.html?c=line-easing

library(shiny); library(dplyr); library(echarty)

ui <- fluidPage( titlePanel("Resize with echarty"),
    fluidRow(ecs.output('chart')),
    checkboxInput('toggle900','Toggle Size 900px'),
    checkboxInput('toggle400','Toggle Size 400px')
)

server <- function(input, output) {
  
  output$chart <- ecs.render({
    # add column color
    tmp <- data.frame(Species = as.vector(unique(iris$Species)),
                      color = c("#387e78","#eeb422","#d9534f"))
    df <- iris %>% inner_join(tmp)
    p <- df %>% group_by(Species) %>% ec.init()
    p$x$opts$xAxis <- list(name='Sepal.Length', nameLocation='center')
    p$x$opts$yAxis <- list(name='Sepal.Width', nameRotate=90, nameLocation='center')
    p
  })
  
  observeEvent(input$toggle400, {
    p <- ecs.proxy('chart')
    val <- if (input$toggle400) 400 else 'auto'
    p$x$opts <- list( resizeOpts=list(width=val, height=val, 
                animation = list(duration= 2000, easing= 'linear')) )
    p %>% ecs.exec('p_resize')
  })
  
  observeEvent(input$toggle900, {
    p <- ecs.proxy('chart')
    val <- if (input$toggle900) 900 else 'auto'
    p$x$opts <- list( resizeOpts=list(width=val, height=val, 
                animation = list(duration= 2000, easing= 'elasticOut')) )
    p %>% ecs.exec('p_resize')
  })
  
  ecs.output("chart")
}

shinyApp(ui = ui, server = server)

inquiry by @Camil88, user-activated resize of chart

Thanks @helgasoft, it'll be useful fo sure

Morphing charts with echarty and shiny, for @ticarki

library(echarty); library(shiny)
ui <- fluidPage(
  actionButton("switch", "Morph chart"),
  ecs.output("plot")
)
server <- function(input, output, session) {
  setd <- \(type, ...) {
    ec.init(preset= FALSE, ..., 
      series= list(list(
        type= type, labelLine= list(show=F),
        data= ec.data(cars), 
        animationDurationUpdate= 1700,
        universalTransition= list(enabled=T) ))
    )
  }
  opie <- setd('pie')
  obar <- setd('bar', xAxis= list(scale=T), yAxis=list(show=T), colorBy='data')
  # ec.util(cmd='morph', opie, obar)  # test: mouseover to morph
  tgl <- TRUE
  
  output$plot <- ecs.render({ opie })
  
  observeEvent(input$switch, {
    p <- ecs.proxy("plot")
    if (tgl) # pie
      p$x$opts <- obar$x$opts
    else
      p$x$opts <- opie$x$opts
    tgl <<- !tgl
    p |> ecs.exec('p_replace')
  })
}
shinyApp(ui, server)

@helgasoft thanks for your feedback and introducing your great package to me. However, it is not what I was looking for. Is there a way to have the pie chart and switch to a bar chart with categorical x-axis labels? Or in general, switching to a scatter, density, etc. plot with a transition. Is this generally possible?

have the pie chart and switch to a bar chart with categorical x-axis

Apparently - no

Or in general, switching to a scatter, density(line)...

category to category axes - yes

  opie <- setd('scatter', xAxis= list(type='category'), yAxis=list(show=T), colorBy='data')
  obar <- setd('bar',     xAxis= list(type='category'), yAxis=list(show=T), colorBy='data')