CODEWITHSUNDEEP
nvd3.jsrchartsshiny
Tumaini Kilimba
Tumaini Kilimba

Reputation: 195

Unable to appropriately assign a size to NVD3 chart

I am experimenting with an NVD3 chart, and though it renders correctly in shiny dashboard, the div which contains the chart overflows shiny dashboards box() container (does not fit snugly into the box). Explicitly setting height and width for the chart changes the charts size but not the containing div, which continues to overflow the box container; I seemingly have no control over the divs size? Code is as below:

app.R

library(shiny)
library(shinydashboard)
library(rCharts)
library(curl)

consent <- read.csv(curl("https://raw.githubusercontent.com/kilimba/data/master/consent.csv"))

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      box(showOutput("distPlot2"),width = 6)
      )
    )
)

server <- function(input, output) { 

  output$distPlot2 <- renderChart2({
    p2 <- nPlot(HIVConsentRate ~ Year, 
                group = 'HIVRefused', 
                data = consent, 
                type = 'stackedAreaChart',
                height = 250,
                width = 450)

    return(p2)
  })
}

shinyApp(ui, server)

Any help appreciated, Tumaini

Upvotes: 0

Views: 184

Answers (2)

Tumaini Kilimba
Tumaini Kilimba

Reputation: 195

Sorry guys, still not sure what was the matter, but the tried and tested "switch it off and switch it back on again" worked for me here. Note that I had also forgotten to add the lib variable in showOutput() (at least in this code pasted here, though I had tested with the lib variable set to "nvd3" privately and it had stil proved problematic as far as sizing was concerned. however it works now :)

Upvotes: 0

GPierre
GPierre

Reputation: 903

I tested your code and added the library argument nvd3 to the UI section like this: box(showOutput("distPlot2",'nvd3'),width = 6) to load the javascript library. I was able to adjust the width of the box on the ui side and/or the width of the chart on the server side.

Upvotes: 1

Related Questions