Search code examples
rshinyhighchartsr-highcharter

Duration of point update animation using highchartProxy


I am using the suite of highchartProxy functions in Shiny. I would like to set the animation duration to 6000 milliseconds when updating points of a packedbubble series using hcpxy_set_data, with the argument updatePoints=T.

As shown in the example below, I can achieve the desired effect when using a column series. However, using same logic, I am not able to achieve the same effect for a packedbubble. Instead, the animation duration of the update of this series is instantaneous, such that the animation argument of hcpxy_set_data seems to be ignored.

I thought this might in some way be related to the fact that in the packedbubble series the simulation option overrides animations. But even after disabling the simulation algorithm I am still unable to control the animation duration.

Below you will find an example app, providing a comparison of the animation effects for a), column series and b), packedbubble series.

library(tidyverse)
library(highcharter)
library(shiny)

# UI
#================================================================================
column <- purrr::partial(shiny::column, width = 6)
ui <- fluidPage(
  tags$hr(),
  actionButton("reset", "Reset charts", class = "btn-danger"),
  tags$hr(),
  fluidRow(
    column(
      actionButton("set_column_data", "Update column series"),
      highchartOutput("hc_set_column_data")
    ),
    column(
      actionButton("set_bubble_data", "Update bubble series"),
      highchartOutput("hc_set_bubble_data")

    )
  )
)

# Server
#==============================================================================
server <- function(input, output, session){
  
  # Create original series
  #----------------------------------
  
  # Column
  output$hc_set_column_data <- renderHighchart({
    
    input$reset
    df <- data.frame(
      month = month.abb,
      A = c(rep(20, 11), 30),
      B = c(rep(5, 11), 30),
      C = c(rep(18, 11), 30),
      D = c(rep(80, 11), 30)
    ) %>% tidyr::pivot_longer(A:D, names_to = "name", values_to = "value")
    hchart(df, "column", hcaes(month, value, group = name)) %>%
      hc_xAxis(title = list(text = "")) %>%
      hc_yAxis(title = list(text = ""))
    
  })
  # Bubble
  output$hc_set_bubble_data <- renderHighchart({
    
    input$reset
    d <- data.frame(
      name = c('G1', 'G2'),
      value = c(1, 1)
    )
    hchart(d, "packedbubble", hcaes(name = name, value = value)) %>%
      hc_plotOptions(
        packedbubble = list(
          colorByPoint=T,
          layoutAlgorithm = list(
            enableSimulation=F
          )
        )
      )
    
  })
  
  # Update single point in series
  #-----------------------------------------
  
  # Column
  observeEvent(input$set_column_data, {

    df <- data.frame(
      month = month.abb,
      A = c(rep(20, 11), 30),
      B = c(rep(5, 11), 30),
      C = c(rep(18, 11), 30),
      D = c(rep(80, 11), 90)
    ) %>% tidyr::pivot_longer(A:D, names_to = "name", values_to = "value")
    highchartProxy("hc_set_column_data") %>%
      hcpxy_set_data(
        type = "column",
        data = df,
        mapping = hcaes(month, value, group = name),
        redraw = TRUE,
        updatePoints=T,
        animation =list(enabled=T, duration=6000)
      )

  })
  
 # Bubble
  observeEvent(input$set_bubble_data, {
    
    d <- data.frame(
      name = c('G1', 'G2'),
      value = c(4, 1)
    )
    highchartProxy("hc_set_bubble_data") %>%
      hcpxy_set_data(
        type = "packedbubble",
        data = d,
        mapping = hcaes(name=name, value=value),
        redraw = T,
        updatePoints=T,
        animation =list(enabled=T, duration=6000)
      )
    
  })
  
  
}
  
shiny::shinyApp(ui, server)

Solution

  • Unfortunately, the animation property in packed bubble series doesn't have any effect on the duration of animation, as it relies on a layout simulation which takes precedence over it. On the other side, you can control how fast the bubbles are laid out by controlling layoutAlogrithm parameteres, such as gravitationalConstant, maxIterations or initialPositions.

    Also, note that setting the enableSimulation to false results in hiding the layout algorithm appearance rather than actually disabling it.

    API:
    https://api.highcharts.com/highcharts/series.packedbubble.layoutAlgorithm