Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Plotly Fluid Resizing with Window Screen

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>

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.

Wonderful! Thank you Etienne!