Unable to appropriately assign a size to NVD3 chart

[kilimba]

Hello,

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. Explicitly setting height and width for the chart changes the charts size but not the containing div, which continues to overflow the box container. 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

[wsurles]

I solve this by setting the the size of the div in a css file.

In your case you will need to add custom.css to www folder and then add...

#distPlot2, #distPlot2 .rChart {
  height: 250px;
  width: 450px;
}

Add an includeCSS function to your dashboard body...

dashboardBody(
    includeCSS("www/custom.css"),
    fluidRow(
     ...

I am assuming the div has the same id as the output name. Thats the case in my apps. You can always inspect the element in the browser to see what it is.

I don't know why you need it twice (once with .rChart and once without) but I noticed without this that if you go to another page and then come back your rcharts will inherit the div size of the last rchart on the page. This will cut your chart in half or make the div overflow again. That is a bigger issue. Explicitly setting the div size of each chart is the only way I have found to fix it.

[firezqf]

I solve this by create a new function.(modify source code)

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

new function

renderChartfa <- function(expr, env = parent.frame(), quoted = FALSE) { func <- shiny::exprToFunction(expr, env, quoted) function() { rChart <- func() chtstyle <- sprintf("", rChart$params$width, rChart$params$height) cht <- paste(capture.output(rChart$print()), collapse = '\n') HTML(paste(c(cht_style, cht), collapse = '\n')) } }

body <- dashboardBody(

showOutput("myChart", "morris") )

server <- function(input, output) { output$myChart <- renderChart_fa({ haireye <- as.data.frame(HairEyeColor) dat <- subset(haireye, Sex == "Female" & Eye == "Blue") p1 <- mPlot(x = 'Hair', y = list('Freq'), data = dat, type = 'Bar', labels = list("Count")) p1$params$width="100%" return(p1) }) } shinyApp( ui = dashboardPage( dashboardHeader(), dashboardSidebar(), body ), server = server )