Resizing with default height/width - how to?

plotly.js
1

For some graphs, I do not specify height/width at all.
For some, I only specify height.

Instead, I use a CSS grid system, so my plotly charts somehow take the full width available to them automatically.

Now, how do I make Plotly resize with unknown height/width? I.e. to make it choose height/width the same way it does when rendering for the very first time?

1 Like
2

Here’s how: http://codepen.io/etpinard/pen/vGVZxe

Unfortunately, by writing up the above codepen I’ve noticed a newly-introduced bug with our resize routine.

So, it works in plotly.js v1.9.0 but not v1.10.0.

Please subscribe to https://github.com/plotly/plotly.js/issues/488 for the latest development info.

1 Like
3

Looks like your example does not solve the original issue outlined in the topic.

You are still setting width/height manually:

graphDiv.style.width = '500px';
graphDiv.style.height = '500px';

The goal here is that

By this I mean I don’t set graph’s height/width for DIVs either. It is set automatically by the CSS of the grid system.

… unless I misunderstood your example?

4

using getComputedStyle should do the trick then.

5

If not, could you share an example of your grid CSS ?

6

The grid system is this one.

The layout is with 2 columns:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size--1-of-2">
    <div class="left-plot-here"></div>
  </div>
  <div class="slds-col slds-size--1-of-2">
    <div class="right-plot-here"></div>
  </div>
</div>