Scaling flexdashboard gauge in R

Question

I'm trying to use flexdashboard::gauge, but it is always the same size(doesn't scale) and I don't know how to change it's size. I know there is a way to do this for normal plots using renderPlot and setting for example height. Is there a way to do something similar with renderGauge ?

It's my code:

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny    
---



```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(googleVis)
```


Column {.sidebar}
-----------------------------------------------------------------------

```{r}
selectInput("n", label = "Number of bins:",
            choices = c(10, 20, 35, 50), selected = 20)
```



Column {data-width=500}
-----------------------------------------------------------------------


### Gauge

```{r}
renderGauge({
    invalidateLater(1000, session)
    dane <- round(runif(1,0,100))
    df <- data.frame(Label = "IRR", Value = as.numeric(dane))
    gauge(dane, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
  })

```

### Chart A

```{r }
renderPlot({
  plot(1:10,1:10)
})
```


Column {data-width=500}
-----------------------------------------------------------------------

### Chart B

```{r}
renderPlot({
  plot(1:10,1:10)
})
```

### Chart C

```{r}
renderPlot({
  plot(1:10,1:10)
})
```

The rest of charts are to fill the place. Do you know how to make this gauge bigger? Thanks!

Answer 1

This might not be too hard after all. The real problem seems to lie in justgage.css, which fixes the height to 160px. You can override this by adding custom css, for example in the following way:

File extra.css:

.html-widget.gauge {
  height: 100%; /*or try sth like 320px instead of 100%, whatever you prefer*/
}

.html-widget.gauge svg {
  height: 100%; /*or try sth like 320px instead of 100%, whatever you prefer*/
  margin-top: -10px;
  margin-bottom: -40px;
}

And then edit the yaml header of your document like below:

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: extra.css
runtime: shiny
---

This expects the file extra.css to be in the same directory as your main document.

Answer 2

The current solution ALMOST worked for me. I had to use google chrome inspect (right click) to find the div class name of the gage. In my configuration the gage was called ...

So I added the following to my CSS script...

.chart-stage {
  height: 180px;
}