quarto-dev / quarto-dev/quarto-cli

Plotly renders incorrectly when sidebar is included

Open
#13,802 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dashboards plotly shiny
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

I have:
  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide
Bug description

When trying to include an interactive plotly in a Quarto dashboard with R shiny, the plot will not render correctly and will jump outside the card when either a sidebar or other cards are included. Do you know of any work around, as I would like to include a sidebar in my dashboard (please see the reproducible example below)

I see a similar issue was raised in plotly plots don't work with shiny ui inputs for Quarto dashboards #8608, but I see no fix for R users.

Steps to reproduce
---
title: "plotly_bug"
format: dashboard
server: shiny
---

```{r}
#| context: setup
#| include: false

library(shiny)
library(bslib)
library(plotly)
library(palmerpenguins)
library(dplyr)
```

# {.sidebar}

```{r}
sliderInput(
    "slider",
    label = "Number of bins",
    min = 10,
    max = 60,
    value = 20
  )
```


# Plot

## Row

### Card
```{r}
plotlyOutput(outputId = "plot") 
```


```{r}
#| context: server

output$plot <- renderPlotly({ 
    p <- 
      penguins |> 
      filter(!is.na(body_mass_g)) |> 
      ggplot(aes(body_mass_g)) + 
      geom_histogram(bins = input$slider) 

    ggplotly(p) 
  }) 

```
Outputs:
Loading required namespace: shiny


processing file: plotly_bug.qmd
                                                                                                            
output file: plotly_bug.knit.md

pandoc 
  to: html
  output-file: plotly_bug.html
  template: /opt/quarto/1.8.25/share/formats/dashboard/template.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  variables: {}
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  page-layout: custom
  title: plotly_bug
  server:
    type: shiny
  
Loading required package: shiny

Attaching package: ‘bslib’

The following object is masked from ‘package:utils’:

    page

Loading required package: ggplot2

Attaching package: ‘plotly’

The following object is masked from ‘package:ggplot2’:

    last_plot

The following object is masked from ‘package:stats’:

    filter

The following object is masked from ‘package:graphics’:

    layout


Attaching package: ‘palmerpenguins’

The following objects are masked from ‘package:datasets’:

    penguins, penguins_raw


Attaching package: ‘dplyr’

The following objects are masked from ‘package:stats’:

    filter, lag

The following objects are masked from ‘package:base’:

    intersect, setdiff, setequal, union

Listening on http://localhost:4642/


Screenshot of quarto shiny dashboard output showing dysfunctional plotly missing from card Screenshot of quarto shiny dashboard output showing dysfunctional plotly outside of card
Actual behavior

Plotly does not render, either flickers or jumps around page

Expected behavior

Interactive plotly renders inside card and reacts based on input

Your environment

RStudio in Posit Workbench 2025.09.1+401.pro2, “Cucumberleaf Sunflower”

Quarto check output
Quarto 1.8.25
[✓] Checking environment information...
      Quarto cache location: /mnt/homes/matthh10/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.25
      Path: /opt/quarto/1.8.25/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/local/bin
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /usr/bin/google-chrome
      Source: PATH

[✓] Checking basic markdown render....OK

WARN: Specified QUARTO_PYTHON '/opt/python/3.13.0/bin/python' does not exist
WARN: No python binary found in specified QUARTO_PYTHON location '/opt/python/3.13.0/bin/python'
[✓] Checking Python 3 installation....OK
      Version: 3.13.8
      Path: /opt/python/3.13.8/bin/python3
      Jupyter: 5.9.1
      Kernels: python3, py3.12.11, py3.11.13, py3.10.19, py3.12.12, py3.13.8

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.5.1
      Path: /opt/R/4.5.1/lib/R
      LibPaths:
        - /mnt/homes/matthh10/R/x86_64-pc-linux-gnu-library/4.5
        - /opt/R/4.5.1/lib/R/library
      knitr: 1.50
      rmarkdown: 2.30

[✓] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the reproducible plotly_bug.qmd example with Quarto 1.8.25, R Shiny, and a dashboard sidebar, then compare the rendered dashboard with the screenshots. Trace why the plotly output leaves or flickers outside its card; done means the interactive plot remains inside the card and responds to the slider.

Written by the indexing model from the issue text.

Assessment

Tech stack
plotly, r
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.