Indeed you are right.
I completely disregarded the responsivity of the plot that was “hard-coded” in my original example (it was the {responsive: true} as the last argument of the newPlot function.
The issue I am facing now is that I am not able to get responsivity to the div width in my plots anymore, not even with the original code…
So I have to understand what problem is causing this at the moment…
Edit:
I realized what was the issue. I was trying to trigger a resizing just by changing the value inside the cell:
html"""<style>
main {
max-width: 900px;
align-self: flex-start;
margin-left: 200px;
}
"""
The plot resize from plotly from my understanding instead only triggers when you resize the actual window of the browser.
Using this modified code below:
function Base.show(io::IO, mimetype::MIME"text/html", p::PlotlyBase.Plot)
show(io,mimetype,@htl("""
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<div style="height: auto">
<script id=plotly-show>
const PLOT = this ?? document.createElement("div");
(this == null ? Plotly.newPlot : Plotly.react)(PLOT,$(HypertextLiteral.JavaScript(json(p.data))),$(HypertextLiteral.JavaScript(json(p.layout))),{responsive: true});
return PLOT
</script>
</div>
"""))
end
I was able to get plot resizing when changing the size of the window.
There is still some investigation on how to avoid hard-coding responsivity and accepting other plotly config options.
According to this issue:
It was a design choice by Slygon to move the “config” part of the plot to PlotlyJS rather than plotlybase.
This makes it a bit more difficult to handle it nicely but we defeinitely can do better.