Make layout height & width understand viewport and percentage sizes

[caalberts]

Hi, how can I set the width of the svg chart according to viewport width? I tried using width: '80vw' in layout, but plotly doesn't seem to parse the vw units. Appreciate any help!

      const layout = {
        hovermode: 'closest',
        autosize: true,
        // width: 1000,
        // height: 600,
        margin: {
          l: 50,
          r: 20,
          b: 50,
          t: 50,
          pad: 10
        },
        yaxis: {
          rangemode: 'tozero'
        }
      }

[etpinard]

plotly.js only understands fixed height and width at the moment.

This tutorial https://plot.ly/javascript/responsive-fluid-layout/ shows you how to make responsive/fluid plotly.js graphs.

Personally, I really like the idea of making height and width understand viewports and width percentage.

Changing the issue title to reflect a feature request.

[amirmog]

Any progress on this?
Any ideas as how to make the graph take up 100% of the height and width of its parent container?

ps. I have already see this:
https://plot.ly/javascript/responsive-fluid-layout/

Thank you.

[etpinard]

@amirmog we hope to merge numerous auto-size improvements in #635 before the next release.

It won't resolve the height-in-percentage proposal, but it will make it easier for community contributor to add this feature.

[fresheneesz]

Here's a function that can convert any valid absolute or relative css length to pixels:

// gets the pixel length of a value defined in a real absolute or relative measurement (eg mm)
function lengthToPixels(length, metric) {
    if(lengthToPixels.cache === undefined) lengthToPixels.cache = {}//{px:1}
    var conversion = lengthToPixels.cache[metric]
    if(conversion === undefined) {
        var tester = document.createElement('div')
        tester.style.width = 1+metric
        tester.style.visibility = 'hidden'
        tester.style.display = 'absolute'
        document.body.appendChild(tester)
        conversion = lengthToPixels.cache[metric] = tester.offsetWidth
        document.body.removeChild(tester)
    }

    return conversion*length
}

[nzjrs]

also broken for me. any pointers how to make graphs be 100% of their parent container?

[antoinerg]

@chriddyp Can you elaborate on the use case for this feature?

Currently, without specifying a width or a height, it seems like figures are 100% of their parent container. Therefore, one can control the graph size in CSS using any unit of measurements (pixel, viewport and percentage sizes). See for example https://codepen.io/antoinerg/full/NLboJw

It is my understanding that viewport and percentage sizes only make sense in the context of a page. In my opinion, this presentation logic should be CSS' business so I am not sure plotly.js should deal with those explicitly. Is there a use case I am not seeing or can we close this issue?

[pdfabbro]

It appears that you can change the height on resize, but not the width as the width is always dependent on the height you set. You should be able to set a minWidth and a scroll bar because the charts are completely illegible on mobile.