rdashboardquartocrosstalk

multiple filters inside a box in dashboard Quarto

I would like to show multiple filters from the crosstalk below each other in a quarto dashboard. Unfortunately, they are not all visible. Here I created some reproducible code:

---
title: "Palmer Penguins"
author: "Quinten"
format: dashboard
#logo: penguins.png
theme: zephyr
---

```{r}
# import packages
library(tidyverse)
library(crosstalk)
library(DT)
library(plotly)
library(gt)
library(palmerpenguins)

# import data
penguins <- palmerpenguins::penguins

# Crosstalk dataset
shared_penguins <- SharedData$new(penguins)

# Set theme
theme_set(theme_minimal())
```

# {.sidebar}

This is a simple static dashboard to show what is possible with the newest version of [Quarto v1.4](https://quarto.org/docs/blog/posts/2024-01-24-1.4-release/). To make it a bit interactive we use the [crosstalk](https://github.com/rstudio/crosstalk) package and [plotly](https://plotly.com/r/).

***

In this dashboard we visualize the [palmerpenguins](https://allisonhorst.github.io/palmerpenguins/) dataset. In the table below is some basic information about the data:

| Specie       |  Count             |
|--------------|---------------------|
| **Adelie**     | `{r} nrow(subset(penguins, species == "Adelie"))`  |
| **Gentoo**   | `{r} nrow(subset(penguins, species == "Gentoo"))`   |
| **Chinstrap**  | `{r} nrow(subset(penguins, species == "Chinstrap"))` |

***

# Analysis

## Row {height=40%}

### Column {width=70%}

```{r}
#| title: "Slider options"
filter_slider("bill_length_mm", "bill length", shared_penguins, ~bill_length_mm)
filter_slider("bill_depth_mm", "bill depth", shared_penguins, ~bill_depth_mm)
filter_slider("flipper_length_mm", "flipper length", shared_penguins, ~flipper_length_mm)
filter_slider("body_mass_g", "body mass", shared_penguins, ~body_mass_g)
```

### Column {width=30%}

```{r}
filter_checkbox("sex", "sex", shared_penguins, ~sex)
```


## Row {height=60%}

```{r}
#| title: "Flipper length vs body mass"
p <- ggplot(shared_penguins, aes(x = flipper_length_mm, y = body_mass_g, color = species, shape = species)) +
  geom_point() +
  scale_color_manual(values = c("darkorange","darkorchid","cyan4")) 

ggplotly(p)
```

Output:

enter image description here

As you can see the slider options are not all visible somehow. They don't fit in the box. When you click on the pop up of that part it is shown better:

enter image description here

Is there a way to show the sliders more visible like similar in the pop up?

Solution

  • First put all your sliders in a <div> so we can change the CSS of its children without affecting the rest of the page. Your first R chunk can be:

    slider_width = 700
#| title: "Slider options"
htmltools::div(
    id = "sliderdiv", 
    filter_slider("bill_length_mm", "bill length", shared_penguins, ~bill_length_mm, width = slider_width),
    filter_slider("bill_depth_mm", "bill depth", shared_penguins, ~bill_depth_mm, width = slider_width),
    filter_slider("flipper_length_mm", "flipper length", shared_penguins, ~flipper_length_mm, width = slider_width),
    filter_slider("body_mass_g", "body mass", shared_penguins, ~body_mass_g, width = slider_width)
)

    I've manually set the width in case that's something you want to do but you may not need to. Then include some CSS towards the start of the document, to:

    1. Make the label text smaller and move it down a bit.
    2. Make the slider value text smaller.
    3. Remove the grid labels (you can see the slider values selected and when you drag it).
    <style>
#sliderdiv .control-label {
    font-size: 10px;
    position: relative;
    top: 25px;
    left: 30px;
}
#sliderdiv .irs-from, #sliderdiv .irs-to {
    font-size: 8px !important;
}
#sliderdiv .irs-grid {
    display: none !important;
}
</style>

    You may want to play around with the values a little bit but essentially this means there's less to display. Even if we get to the point that the box becomes small enough to need a vertical scroll bar, the sliders, labels and values are still visible:

    enter image description here