Uncaught TypeError: instance.resize is not a function

[Tixierae]

Minimal reproducible example:

library(shiny)
library(C3) # install via devtools::install_github("tixierae/shinyJsTutorials/tutorials/materials2/C3")

server = function(input,output) {
    my_df = reactive({
        input$button
        my_df = list(a=runif(1,0,100),b=runif(1,0,100),c=runif(1,0,100))
        list(my_df=my_df)
    })
    output$my_pie1 = renderC3Pie({
        C3Pie(value = my_df()$my_df)
    })
}
ui = shinyUI(
    navbarPage(id="main", position = "fixed-top", title=NULL, inverse=T, selected="tab1",
        tabPanel("tab1",
            fluidRow(br(),br(),br(),
                actionButton("button", "Draw!"),
                C3PieOutput("my_pie1")
            )
        ),
        tabPanel("tab2",
            fluidRow(br(),br(),br(),
            )
        )
    )
)
shinyApp(ui=ui, server=server)

Procedure to reproduce the error (happens at least on Chrome and Firefox):

• go to 'tab2'
• generously zoom in or out
• go back to 'tab1'. The app is now frozen.

Inspect on Chrome shows:

Uncaught TypeError: instance.resize is not a function
    at Object.resize (htmlwidgets.js:822)
    at exports.OutputBinding.shinyBinding.resize (htmlwidgets.js:526)
    at output_binding_adapter.js:12
    at OutputBindingAdapter.onResize (utils.js:114)
    at HTMLDivElement.<anonymous> (init_shiny.js:305)
    at Function.each (jquery.min.js:2)
    at n.fn.init.each (jquery.min.js:2)
    at j (init_shiny.js:298)
    at Debouncer.$invoke (input_rate.js:56)
    at Debouncer.immediateCall (input_rate.js:44)

I'm working with the dev version of htmlwidgets (installed from GitHub).
In my fork of C3, I just modified the colors of the pie chart.

I'm not sure whether this has to do with the htmlwidgets package or C3.

[timelyportfolio]

htmlwidgets require a resize method which can be seen in but unfortunately is not included at the end of the tutorial. While the resize can be empty (do nothing), it still must exist. To fix, add

...
      // update the data
      chart.load({
        // new data
        json  : x.dataset,

        // new colors
        colors: x.colors,

        // remove data we no longer need (if any)
        unload: diff,

        // set types
        types : x.types
      });
    },
    resize: function(width, height) {
      // this will vary based on the JavaScript library
      // in the case of C3 we are fortunate that there is a resize method
      //  http://c3js.org/samples/api_resize.html
      chart.resize({height:height, width:width})
    }
   };
}});

There is another example in this article. Hope it helps.

[Tixierae]

That solved it! Thank you so much for the prompt and efficient help!