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!

Custom range for X and Y axis

Hi, I am new to plotly. I am showing 3 charts side-by-side. See attached. Is there a way for chart #2 and #3 to extend to the same height as chart #1?

Thanks.

Looks like chart #2 and #3 have a set layout.yaxis.domain. Clearing that set value should do the trick.

If this doesn’t solve your problem, please share a reproducible example to help us help you.

Thanks for your help. I don’t have any layout in my code. Looks like the only files I can attach are jpg or png. Let me try to add the code here:

<!doctype html>

plotly test page
<script>
var trace1 = {
  x: [1, 2, 3, 6], 
  y: [10, 15, 13, 17], 
  type: 'scatter'
};
var trace2 = {
  x: [1, 2, 3, 6], 
  y: [16, 5, 11, 9], 
  type: 'scatter'
};
var data = [trace1, trace2];

Plotly.newPlot('myDiv', data);
</script>


<script>
var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  mode: 'markers',
   name: 'Scatter'
};

var trace2 = {
  x: [2, 3, 4, 5],
  y: [16, 5, 11, 9],
  mode: 'lines',
   name: 'Lines'
};

var trace3 = {
  x: [1, 2, 3, 4],
  y: [12, 9, 15, 12],
  mode: 'lines+markers',
   name: 'Scatter + Lines'
};

var data = [ trace1, trace2, trace3 ];

Plotly.newPlot('lineandscatter', data);	</script>

Well, that did not go well. Another attempt:

<!doctype html>
<html>
<head>
	<title>plotly test page</title>
	<script src="charts/plotly/plotly-latest.min.js"></script>
</head>
<body>
<div style="vertical-align: bottom;display: flex;margin: 10px;height: 250px;">
	<div id="tester" style="width:500px;float:left;"></div>
	<div id="myDiv" style="width:500px;float:left;"></div>
	<div id="lineandscatter" style="width:500px;float:right;"></div>
</div>
	<script>
		TESTER = document.getElementById('tester');
		Plotly.plot( TESTER, [{
			x: [1, 2, 3, 4, 5],			
			y: [10, 20, 50, 15, 30] 
		}], {
		margin: { t: 0 } 
		} 
		);
	</script>

	
	<script>
	var trace1 = {
	  x: [1, 2, 3, 6], 
	  y: [10, 15, 13, 17], 
	  type: 'scatter'
	};
	var trace2 = {
	  x: [1, 2, 3, 6], 
	  y: [16, 5, 11, 9], 
	  type: 'scatter'
	};
	var data = [trace1, trace2];

	Plotly.newPlot('myDiv', data);
	</script>

	
	<script>
	var trace1 = {
	  x: [1, 2, 3, 4],
	  y: [10, 15, 13, 17],
	  mode: 'markers',
	   name: 'Scatter'
	};

	var trace2 = {
	  x: [2, 3, 4, 5],
	  y: [16, 5, 11, 9],
	  mode: 'lines',
	   name: 'Lines'
	};

	var trace3 = {
	  x: [1, 2, 3, 4],
	  y: [12, 9, 15, 12],
	  mode: 'lines+markers',
	   name: 'Scatter + Lines'
	};

	var data = [ trace1, trace2, trace3 ];

	Plotly.newPlot('lineandscatter', data);	</script>
	
</body>
</html>

Ha I see, you’re using a flex display. That might be the cause, I’ll need to investigate some more.

I solved it. Removed margin: { t: 0 } from the first div, tester. I had used these examples from plotly site itself. This was just a test on how it works. Now, all the three charts are of the same height.

Thanks for your help.