Highcharter is NOT automatically resize output in shinydashboard

Question

The development-version of highcharter package has the following issue:

highchartOutput DOES NOT automatically resize the width of the plot when hiding the sidebar in shinydashboard. The width of the plot always remains same.

I provide an example here,

# install development-version of highcharter
# devtools::install_github("jbkunst/highcharter")

library(shinydashboard)
library(shiny)
library(highcharter)
library(dplyr)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(
      width = 12,
      highchartOutput("plot")
    )
  )
)

server <- function(input, output) {

  output$plot <- renderHighchart({
    highcharts_demo()
  })
}

shinyApp(ui, server)

I have tried

$(document).on("click", ".sidebar-toggle", function() { $(window).trigger("resize"); });

BUT it still does not work for development-version highcharter when I use renderHighchart & highchartOutput functions.

However, I found

• renderHighchart2 and highchartOutput2 working well for resizing.

• BUT renderHighchart2 and highchartOutput2 DO NOT support heatmap, I still need to use renderHighchart and highchartOutput to get correlation plot.

ANY suggestions for this resizing problem?

Answer 1

After doing more research, I got the solution. In the development-version highcharter , fix the code in highcharter.js file as following:

/* fix bug here */
 resize: function(el, width, height, instance) {

   /* http://stackoverflow.com/questions/18445784/ */
   var chart = $("#" +el.id).highcharts();
   var height = chart.renderTo.clientHeight; 
   var width = chart.renderTo.clientWidth; 
   chart.setSize(width, height); 

 }

Then the automatic resizing will work appropriately.