Make Highchart R the full width and height of the box in Shiny

Question

Hello I have a box that renders a highchart object. The issue I am having is there is a lot of white space around the chart in the box. Is there a way to make the graph take up the whole space so no white is showing?

library(shiny)
library(bs4Dash)

    df = data.frame(x = 1:100, y =rnorm(100))

 shiny::shinyApp(
  ui = bs4DashPage(
   old_school = FALSE,
   sidebar_min = TRUE,
   sidebar_collapsed = FALSE,
   controlbar_collapsed = FALSE,
   controlbar_overlay = TRUE,
   title = "Basic Dashboard",
   navbar = bs4DashNavbar(),
   sidebar = bs4DashSidebar(),
   controlbar = bs4DashControlbar(),
   footer = bs4DashFooter(),
   body = bs4DashBody(
    fluidRow(
       bs4Card(
          width = 4,
          title = "Net Investing Cash Flow",
          highchartOutput("graph")
        )
    ))
  ),
  server = function(input, output) {
    output$graph = renderHighchart({
      highchart() %>% hc_xAxis(categories = df$x) %>% hc_add_series(name = "Earnings Yield",  data = df$y)%>% hc_add_theme(hc_theme_darkunica())
    })
}
)

Answer 1

We need to override the bootstrap css for the boxes. To find which css class we need to modify we print out the result from the box function in our console.

box(
  width = 4,
  title = "Net Investing Cash Flow",
  highchartOutput("graph")
)


<div class="col-sm-4">
  <div class="card card-default">
    <div class="card-header">
      <h3 class="card-title">Net Investing Cash Flow</h3>
      <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse">
          <i class="fa fa-minus"></i>
        </button>
        <button type="button" class="btn btn-tool" data-card-widget="remove">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>
    <div class="card-body">
      <div id="graph" style="width:100%; height:400px; " class="highchart html-widget html-widget-output"></div>
    </div>
  </div>
</div>

We can now see that the highchart is placed in a div with the class card-body That means we should add the following code somewhere in our dashboardBody in the UI code.

tags$head(
      tags$style(
        ".card-body {
           padding: 0px;
        }"
      )
    ),

this will override the css from shinydashboard. The tags$head will make sure that the css is placed in the head tag your document which is the place where we want all the css code. placing the code in the dashboardBody will make sure the staly comes at the end of the head tag - we want that since that makes it override any css added earlier