Plotly Fluid Resizing with Window Screen

plotly.js
1

Hey guys,

I am very new to plotly. I’ve been able to set up several charts, but as soon as I implement the resize function, the chart disappears. Obviously I must be doing something wrong, but I have been toiling for days, and cannot figure it out. Any help would be greatly appreciated. I’ve tried following the example to the letter. This histogram works perfectly fine outside of the resizing function.
This is my current code:
(I had to remove the starting “<” on the first two tags in order to get my code to post)

<div id="myDiv" class="plotly" align="center" style="display:none; width:1200px; height:750px;"></div>
script>
(function() {
	var d3 = Plotly.d3;
	var WIDTH_IN_PERCENT_OF_PARENT = 80,
    HEIGHT_IN_PERCENT_OF_PARENT = 50;

	var gd3 = d3.select("div[id='myDiv']")
		.style({
			width: WIDTH_IN_PERCENT_OF_PARENT + '%',
			'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
			height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
			'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});
		var my_Div = gd3.node();
		var array = <?php echo json_encode($values); ?>;
		var data = [
			{
				type: 'histogram',
				x: array,
				marker: {
					color: '#C8A2C8',
					line: {
						width: 2.5
					}
				}
			}
		];
		 
		Plotly.plot(my_Div, data, {title: 'Lets Go!',font:{ size:16 }});
		
		
		window.onresize = function() { Plotly.Plots.resize( my_Div ); };
		})();
		
		
	</script>
2

Your graph div has display: none style attribute, explaining why your graph does not show.

See http://codepen.io/etpinard/pen/NrrOrY for a full working example.

3

Wonderful! Thank you Etienne!