quarto-dev / quarto-dev/quarto-cli
Dashboard with plotly cuts the legends in preview
Open
@cderv is already working on this.
Since Jul 1, 2025.
bug
dashboards
plotly
third-party
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
I used quarto preview file.qmd
legends get cut even if I put it in the middle of the plot:
Steps to reproduce
---
# YAML header created by ox-ravel
format: dashboard
embed-resources: true
title: quarto plotly
author: .
---
# Test
## Column {.tabset scrolling=True}
### head1 {scrolling=True, .flow}
#### Rows {scrolling=False}
##### Column
::: {.card title="PR"}
```{python}
#| echo: FALSE
#| eval: TRUE
#| results: 'hide'
#| message: FALSE
#| warning: FALSE
#| error: FALSE
#| cache: FALSE
#| fig.width: 10
#| fig.height: 10
#| autodep: TRUE
import pandas as pd
import numpy as np
from sklearn.metrics import precision_recall_curve, roc_curve
import plotly.express as px
y_true = np.array([0, 0, 1, 1])
y_scores = np.array([0.1, 0.4, 0.35, 0.8])
precision, recall, thresholds = precision_recall_curve( y_true, y_scores)
y_true2 = np.array([1, 0, 0, 1,0,1])
y_scores2 = np.array([0.9, 0.34, 0.35, 0.1,0.9,0.9])
precision2, recall2, thresholds2 = precision_recall_curve( y_true2, y_scores2)
toplot=pd.concat(
[pd.DataFrame({'precision':precision,'recall':recall,"algorithm":"algorighm 1 auc=0.3"}),
pd.DataFrame({'precision':precision2,'recall':recall2,"algorithm":"algoritm 2 auc =0.9"})]
)
px.line(toplot,
x='recall',
y='precision',
color='algorithm',
template="plotly_white"
).show()
```
:::
::: {.card title="ROC"}
this shows…
```{python}
#| echo: FALSE
#| eval: TRUE
#| results: 'hide'
#| message: FALSE
#| warning: FALSE
#| error: FALSE
#| cache: FALSE
#| fig.width: 10
#| fig.height: 10
#| autodep: TRUE
fpr, tpr, thresholds = roc_curve( y_true, y_scores)
fpr2, tpr2, thresholds2 = roc_curve( y_true2, y_scores2)
toplot2=pd.concat(
[pd.DataFrame({'fpr':fpr,'tpr':tpr,"algorithm":"algorithm 1 auc 0.3"}),
pd.DataFrame({'fpr':fpr2,'tpr':tpr2,"algorithm":"algorightm 2 auc 0.1"})]
)
fig=px.line(toplot2,
x='fpr',
y='tpr',
color='algorithm',
template="plotly_white"
)
fig.update_layout(legend=dict(
yanchor="top",
y=1,
xanchor="left",
x=0.3
)
)
```
:::
Expected behavior
see the complete legend
Actual behavior
legend get cuts.
inspect shows a warning
Your environment
No response
Quarto check output
No response
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.
Assessment
This issue has not been assessed yet.