Making plotly graphs fill the container width

[lukefullard]

Hello,
I'm unsure if this is a plotly or quarto thing... (I'll delete if it's a plotly thing, but would appreciate any help).

Currently I have a plot within a tabset in quarto and when I first load the quarto generated html file the plot takes up only a proportion of the tabset width:

Now, if I press "ctrl" "+" to zoom in on the page even once, the plot expands to fill the container!

Is there a way to make the plot fill the container all of the time?
Thank you.

[mcanouil]

I do not have the answer (yet), but it would help if instead of sharing screenshots, it was a small reproducible Quarto document to play around with.

[mcanouil]

You need extra ` (four at least):

---
title: "Plotly width test"
format:
  html:
    code-fold: true
    self-contained: true
    page-layout: full 
execute:
  echo: false	
 
jupyter: python3
---



::: {.panel-tabset}




## This is the Python Plot
```{python}
import plotly.graph_objects as go
import numpy as np

N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)

fig = go.Figure(data=go.Scatter(x=t, y=y, mode='markers'))

fig

```


## This is the same Python Plot but in another tab
```{python}
import plotly.graph_objects as go
import numpy as np

N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)

fig = go.Figure(data=go.Scatter(x=t, y=y, mode='markers'))

fig

```

## Just some text 
This tab is just for fun
:::

[lukefullard]

Thanks for your reply, but I don't see too much difference between your code and the one I linked to (sorry, when I initially pasted as plain text I had formatting issues).

Either way, running your code gives me the same issue.
Could you please confirm that you do not get the issue I described, that the plots in your tabs are OK?

Thanks!

[mcanouil]

There is no difference (I can't do anything from the GitHub mobile app 😅), it's only to highlight how to format code, i.e., by adding extra `.
I'll try later and/or someone else can now try with the code.

````
---
title: bla
---

Text

```{python}
code
```

````

[lukefullard]

There is no difference (I can't do anything from the GitHub mobile app 😅), it's only to highlight how to format code, i.e., by adding extra `. I'll try later and/or someone else can now try with the code.

---

title: bla

Text

code

```

Ah! Thanks, very handy to know!

[StevenBlackbeard]

Hi, has there been any update/resolution on this? I'm struggling with the same issue when I test the above code... My findings suggest that, Inside a tabset, the very first tab renders/resizes just fine but the resizing issues affects every tab thereafter.

[devmcp]

I am having this exact same issues. The plot on the first tab fills the container fine, but those on subsequent tabs don't until you do a page zoom, then the plot resizes.

Does anyone have a workaround for this?

[devmcp]

I submitted a bug report here: quarto-dev/quarto#876

[mcanouil]

@devmcp Before opening issues in the wrong repository, please wait for an answer and read the information provided in README.md and issue template.

If you're reporting an issue with Quarto CLI, please visit https://github.com/quarto-dev/quarto-cli

Also, issues need to be self-contained with all information for them to be useful.
Linking to a 3 years old discussion is not very helpful as Quarto CLI and dependencies (plotly, python, etc.) quite evolved since then.
Without code, it's unlikely a solution will be found.

[devmcp]

Thanks for the response. Apologies for putting it in the wrong repo - it wasn't obvious to me which it belonged to. Can it be moved, or should I close it and open another in quarto-cli?

I didn't wait for a reply as I presumed that, regardless of whether or not anyone had managed to find a workaround, the bug would still ideally be fixed at some point and it would be useful to capture it.

It also wasn't obvious to me that duplicating the existing code example was the right thing to do, but I will do so in the new issue.

Thanks again 🙂

[mcanouil]

Thanks for the response. Apologies for putting it in the wrong repo - it wasn't obvious to me which it belonged to. Can it be moved, or should I close it and open another in quarto-cli?

A maintainer will close/transfer likely after the holidays.

It also wasn't obvious to me that duplicating the existing code example was the right thing to do, but I will do so in the new issue.

Well, it's not duplication as it saves time to the person that will take on your report.
Imagine having to follow links, follow the whole thread to see what is the example code to be used if lucky enough there are only few comments and only one reproducible code.
As you are the one having the issue, you know the circumstances to trigger the issue, others don't.
For instance, you've omitted the Quarto CLI version being used which is very important.
As plotly can have its own issues, provideding the version of plotly being used is also important.

As this thread is very old, would you mind opening a new Q&A discussion and follow the guidelines given in the template? Then I can take a look.

• https://github.com/orgs/quarto-dev/discussions/new?category=q-a