quarto-dev / quarto-dev/quarto-cli

Dashboard with plotly cuts the legends in preview

Open
#8,612 19 comments 0 reactions 1 assignee View on GitHub

@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:

image

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
image

Your environment

No response

Quarto check output

No response

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.