change height attributes of graph produced with rCharts for use with rshiny

Question

I am using rCharts to implement an interactive graph in rshiny. I am using the morris library Here is a minimal example of my problem:

## ui.R
require(rCharts)
shinyUI(pageWithSidebar(
  headerPanel("rCharts: Interactive Charts from R using morris.js"),

  sidebarPanel(
  ),
  mainPanel(
    showOutput("myChart", "morris")
  )
))

require(rCharts)
shinyServer(function(input, output) {
  output$myChart <- renderChart({
    data(economics, package = 'ggplot2')
    econ <- transform(economics, date = as.character(date))
    m1 <- mPlot(x = 'date', y = c('psavert', 'uempmed'), type = 'Line',
                data = econ)
    m1$set(pointSize = 0, lineWidth = 1)
    m1$addParams(dom = 'myChart')
    m1$params$width = 200
    m1$params$height = 200
    return(m1)
  })
})

The height and width components work fine if the m1 object is not sent to shiny but they seem to be ignored after being processed by renderChart. I have resorted to a temporary fix using a style sheet:

.shiny-html-output.morris{
  height: 200px;
  width: 200px;
}

Is there some option I am missing? For example in plotOutput in the shiny package you could stipulate: plotOutput("plot2", height = "260px") for example.

You are doing it the right way. Can you add this as an issue on github, so that next time I work on renderChart, I can add this functionality automatically? Thanks. — Ramnath, Jul 12 '13 at 09:23
You can also post your solution as the answer, and accept it so that anyone looking for one can find it. — Ramnath, Jul 12 '13 at 11:51

score 6 · Accepted Answer · answered Jul 12 '13 at 14:50

This is currently functionality that will be added to rCharts in the future. As a temporary fix I added an entry to a style sheet to implement for the two morris graphs on my app. Add a www/ folder to your app directory and create a styles.css file. Add

 tags$head(
   tags$link(rel = 'stylesheet', type = 'text/css', href = 'styles.css')
 ),

to ui.R and place

.shiny-html-output.morris{
  height: 200px;
  width: 200px;
}

in styles.css

change height attributes of graph produced with rCharts for use with rshiny

1 Answers1