Height of plot in HTML?

plotly.js
1

I’m trying to figure out what controls the height of a plotly plot when it is displayed in a browser.
I seem to be getting plots 450px tall (height) and no ability to increase that.

What is interesting, in the code below, if I comment out
"<!DOCTYPE html>"
the plot becomes full height. If I leave it in, it is displayed at 450px height.

<!DOCTYPE html>

<html>
    <head><meta charset="utf-8" /></head>
    <body>
        
        <script type="text/javascript" src="plotlyjs-bundle.js"></script>
            
        <!--<script type="text/javascript" src="figure.js"></script>-->
        
        <div id="myDiv" style="width: 100%; height: 100%;" class="plotly-graph-div"></div>
        <script type="text/javascript">
            (function(){
                var trace1 = {
                  x: [1, 2, 3, 4],
                  y: [10, 15, 13, 17],
                  type: 'scatter'
                };

                var trace2 = {
                  x: [1, 2, 3, 4],
                  y: [16, 5, 11, 9],
                  type: 'scatter'
                };

                var data = [trace1, trace2];

                Plotly.newPlot('myDiv', data);
           }());
        </script>
    </body>
</html>
2

@Borisw37 Did you ever find a way around this problem? I am writing a simple django application and I am struggling with the exact same problem.

3

I was able to modify the height by creating a “container-fluid” and setting a div of height X within it.

I’m no CSS/HTML expert but this worked for me.

<div class="container-fluid" id="contSignalAnalyzer">	
	<div style="height: 800px;" id="plotlyFFT">
		<!--Plotly Chart will be inserted here-->
	</div>
	<hr>
</div>
4

Thanks for the prompt response @Borisw37! Unfortunately this does not seem to help me with my problem. The div.svg-container defaults to 450px with the <!DOCTYPE html> included in the code. When commented out it defaults to 100%, which is what I am trying to achieve. But this is obviously a bad practice.