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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With