Plots in Child Rows of an R/Shiny DT::DataTable

Question

I am not at all versed in JS, so forgive my weak effort in the simple shiny app example below. I am just trying to get a simple highcharts plot to render in the child rows, merely aiming to establish whether this can be done.

The example gives this error in the DevTools console: "Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13/"

If anyone can advise on this example or point me to a more effective alternative, it would be much appreciated (e.g., being able to do this with ggplot instead would still be awesome).

library(DT)
library(shiny)

ui <-shinyUI(fluidPage(
 tags$head(tags$script(src="https://code.highcharts.com/highcharts.js")),
 tags$body(
 HTML("<script type='text/javascript'>document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>")),
DTOutput("tab")))

server <- shinyServer(function(input, output, session) {

output$tab <- renderDT({datatable(
  cbind(' ' = '&oplus;', mtcars), escape = FALSE,
  options = list(
    columnDefs = list(
      list(visible = FALSE, targets = c(0, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 1)
    )
  ),
  callback = JS("
  table.column(1).nodes().to$().css({cursor: 'pointer'});

  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('&oplus;');
    } else {
      row.child('<div id=\"container\" style=\"width:100%;height:600px;\"></div>').show();
      td.html('&CircleMinus;');
    }
  });"
  ))
})


})

shiny::shinyApp(ui,server)

Answer 1

Highcharts error #13 means that rendering div not found.

You need to place a container element for a chart before using the creation script. For example:

<div id="container"></div>

<script type='text/javascript'>
    document.addEventListener('DOMContentLoaded', function() {
        const chart = Highcharts.chart('container', {
            ...
        });
    });

</script>

---

Live demo: http://jsfiddle.net/BlackLabel/o30aL8ev/

Answer 2

For anyone interested, reactable looks like the most straightforward way to go for putting charts in data table child rows. See code and result below:

library(reactable)
library(highcharter)

reactable(iris[1:20, ], details =function(index) {
  VECTOR=iris[1:20,] %>% dplyr::filter(Species==as.vector(unique(iris[index,5]))) %>% select(Sepal.Length) %>% as.data.frame() %>% .[,1] 
  htmltools::div(style = "width: 1000",
                 highchart(type = "stock") %>% 
                   hc_add_series(VECTOR, type = "line"),
# sparkline(VECTOR, type = "bar", chartRangeMin = 0, chartRangeMax = max(6),width = 1000,height = 300),
  h3("Yahoo!")
 
  )
})

What it looks like