Quarto Dashboard + Observable plot legends causes scrolling in cards

Open
#11,576 0 comments 3 reactions 1 assignee View on GitHub

@cscheid is already working on this.

Since Dec 2, 2024.

Assessment

This issue has not been assessed yet.

Description

bug dashboards ojs-engine
Bug description

Turning on legends in observable plots cause scrolling in cards within a quarto dashboard

Steps to reproduce
---
title: "legend: true"
format: dashboard
---

```{ojs}
penguins = d3.csv("https://raw.githubusercontent.com/allisonhorst/palmerpenguins/main/inst/extdata/penguins.csv")
penguins
```

```{ojs}
df_penguins = aq.from(penguins)
df_penguins
```

```{ojs}
Plot.plot({
  color: {legend: true}, // turn off and on to see scroll
  x: {type: 'linear'},
  y: {type: 'linear'},
  marks: [
    Plot.dot(df_penguins, {x: "body_mass_g", y: "bill_length_mm", stroke: "species"})
  ]
})
```
---
title: "legend: false"
format: dashboard
---

```{ojs}
penguins = d3.csv("https://raw.githubusercontent.com/allisonhorst/palmerpenguins/main/inst/extdata/penguins.csv")
penguins
```

```{ojs}
df_penguins = aq.from(penguins)
df_penguins
```

```{ojs}
Plot.plot({
  color: {legend: false}, // turn off and on to see scroll
  x: {type: 'linear'},
  y: {type: 'linear'},
  marks: [
    Plot.dot(df_penguins, {x: "body_mass_g", y: "bill_length_mm", stroke: "species"})
  ]
})
```
Expected behavior

Turning on legends in observable plots should not cause scrolling in cards within a quarto dashboard

Actual behavior

Turning on legends in observable plots cause scrolling in cards within a quarto dashboard

Your environment

Ubuntu 24.04

packageVersion('quarto')
[1] ‘1.4.4’
quarto::quarto_version()
[1] ‘1.5.57’

Quarto check output

Quarto 1.5.57
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.5.57
Path: /usr/lib/rstudio-server/bin/quarto/bin

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

[✓] Checking LaTeX....................OK
Tex: (not detected)

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

[✓] Checking Python 3 installation....OK
Version: 3.12.3
Path: /usr/bin/python3
Jupyter: (None)

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

[✓] Checking R installation...........OK
Version: 4.4.2
Path: /usr/local/lib/R
LibPaths:
- /usr/local/lib/R/site-library
- /usr/local/lib/R/library
knitr: 1.49
rmarkdown: 2.29

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

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

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.

More from quarto-dev/quarto-cli

All issues in quarto-dev/quarto-cli

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.