quarto-dev / quarto-dev/quarto-cli
Captions change figures layout when plotly subfigures are used
Nobody has claimed this yet.
- 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.
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.
Expected behavior
Captions are added under each of the two figures, one for each column. Like this but with captions under.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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