quarto-dev / quarto-dev/quarto-cli

Captions change figures layout when plotly subfigures are used

Open
#13,337 14 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug figures layout plotly
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

I'm simply trying to render two plotly figures side-by-side on a website (using layout-ncol: 2), with a simple caption for each, but the captions change the layout. Each figure is created using make_subplots.

I think this issue might be related to #12839 (and maybe #7967)

Steps to reproduce

Render website using quarto render. Resulting _site is joined in a zip.

test-site.zip

Config: _quarto.yml

project:
  type: website
website:
  search: false
  title: "Test"
  page-navigation: true
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    toc: true

Main file: figs/test.qmd

---
title: "Minimal working example"
author: "rabyj"
format:
  html:
    code-fold: true
    toc: true
    self-contained: false
engine: jupyter
execute:
  echo: true
  warning: false
  eval: true
  error: false
---

Setup imports

```{python}
import numpy as np
import pandas as pd
import plotly.graph_objects as go
from plotly.subplots import make_subplots
```

Function

```{python}
#| label: test-function
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import numpy as np

def create_minimal_example():
    """Minimal example showing subplot title positioning issue."""

    # Hardcoded data
    feature_sets = ["observed", "0blklst"]

    # Sample data for each feature set
    accuracy_data = {
        "observed": [0.95, 0.94, 0.96, 0.93, 0.97],
        "0blklst": [0.92, 0.91, 0.93, 0.90, 0.94],
    }

    f1_data = {
        "observed": [0.93, 0.92, 0.94, 0.91, 0.95],
        "0blklst": [0.90, 0.89, 0.91, 0.88, 0.92],
    }

    # Create subplot
    fig = make_subplots(
        rows=1,
        cols=2,
        shared_yaxes=False,
        subplot_titles=["Accuracy", "F1-score (macro)"],
    )

    # Add traces
    for feature_set in feature_sets:
        # Accuracy subplot
        fig.add_trace(
            go.Box(
                y=accuracy_data[feature_set],
                name=feature_set,
                boxmean=True,
                boxpoints="all",
                showlegend=False,
            ),
            row=1,
            col=1,
        )

        # F1-score subplot
        fig.add_trace(
            go.Box(
                y=f1_data[feature_set],
                name=feature_set,
                boxmean=True,
                boxpoints="all",
                showlegend=False,
            ),
            row=1,
            col=2,
        )

    # Update axes
    fig.update_xaxes(
        categoryorder="array",
        categoryarray=feature_sets,
    )

    return fig
```

Plotting no captions

```{python}
#| label: test-no-cap
#| layout-ncol: 2
fig1 = create_minimal_example()
fig2 = create_minimal_example()

fig1.show()
fig2.show()
```

Plotting with captions

```{python}
#| label: test-with-cap
#| layout-ncol: 2
#| cap-location: bottom
#| fig-cap:
#| - "test1-caption"
#| - "test2-caption"
fig1 = create_minimal_example()
fig2 = create_minimal_example()

fig1.show()
fig2.show()
```

Actual behavior

Captions are added next to the two figures, and the two figures take one column and two rows.

Image
Expected behavior

Captions are added under each of the two figures, one for each column. Like this but with captions under.

Image
Your environment

General env:

  • IDE: vscode 1.103.2 (6f17636121051a53c88d3e605c491d22af2ba755)
  • OS: Ubuntu 24.04.3 LTS (Linux x64 6.14.0-29-generic)

Python env:

  • plotly: 5.22.0
Quarto check output
Quarto 1.8.23
[✓] Checking environment information...
      Quarto cache location: $HOME/.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.23
      Path: /opt/quarto/bin

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

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

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

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

[✓] Checking Python 3 installation....OK
      Version: 3.8.20
      Path: $HOME/Projects/envs/epiclass_py3.8/bin/python3
      Jupyter: 5.8.1
      Kernels: python3

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

[✓] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/

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 with figs/test.qmd and the _quarto.yml configuration, then run quarto render on the provided example. Compare the generated _site output for the test-no-cap and test-with-cap blocks; done means two plotly subfigures remain in one row with each caption below its corresponding figure.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.