quarto-dev / quarto-dev/quarto-cli

Plotly plots don't load at correct size

Open
#6,856 10 comments 1 reaction 1 assignee View on GitHub

@cderv is already working on this.

Since Sep 20, 2023.

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

Description

Bug description

This could be a Plotly bug as far as I know, but I'm working around it with a Quarto revealjs plugin, so I'm reporting it here for reference.

In a presentation with lots of Plotly plots, the plots initially load with an incorrect width. It's not that far off, so I usually don't notice it, but sometimes things get cut off on the sides.

I made a quick hacky workaround by manually running Plotly.js's resize handler when a slide containing a plotly plot loads: https://gist.github.com/kcarnold/551feebb4f7bd54e0e530174e75a04da

I have a hunch that some Plotly initialization code is getting called before Reveal has finished setting up the slide layout. In light of that, perhaps an alternative workaround might be to trigger a window resize event as soon as Reveal is ready.

Steps to reproduce

Page through https://calvin-data-science.github.io/data202/units/04vis2/w4d1-vis2.html — you'll see some plots "jump" as the slide loads. That's my hacky workaround forcing a resize.

Expected behavior

Plots should load at the correct size in the first place.

Actual behavior

Plots resize to the correct size only when the window resizes (or when manually triggered).

Your environment

No response

Quarto check output

Seen on both Firefox and Chrome.

Quarto 99.9.9
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.8: OK
      Dart Sass version 1.55.0: OK
      Deno version 1.33.4: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      Path: /Users/ka37/code/github.com/quarto-dev/quarto-cli/package/dist/bin

(/) Checking tools....................Check file:///Users/ka37/code/github.com/quarto-dev/quarto-cli/src/resources/vendor/deno-land/x/puppeteer@9-0-2/mod.ts
[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /Library/TeX/texbin
      Version: 2023

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

[✓] Checking Python 3 installation....OK
      Version: 3.11.5
      Path: /usr/local/opt/python@3.11/bin/python3.11
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/ka37/Library/R/4.2/library
        - /Library/Frameworks/R.framework/Versions/4.3-x86_64/Resources/library
      knitr: 1.44
      rmarkdown: 2.24

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

(note that the Python 3 installation error there is a lie; Jupyter rendering is working fine for me.)

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.