How can I prevent x-axes from scaling when I draw shapes on my scatter plot?

plotly.js
1

Hello,

I’m using plotly.js to render a scatter chart. I have multiple series with different units of measurement, so I need multiple x-axes. For example, in this chart here, I have temperature in red (degrees Celsius) and volume of water in blue (meters cubed). The x-axis for temperature is along the bottom and the x-axis for water volume is along the top:

scatter plot - no lines

You’ll also see that there are a series of checkboxes below the chart, one of which is Best Fit Line. When the user checks the Best Fit Line checkbox, we want to draw a best fit line for each series. I’m doing so by including line shapes in my layout like so:

var layout = {
	title: 'Scatter Plot',
	dragmode: options.lasso ? 'lasso' : false,
	autosize: false,
	width: 400,
	height: 400,
	margin: {
		l: 45,
		r: 1,
		b: 35,
		t: 45
	},
	plot_bgcolor: '#c7c7c7',
	showlegend: false,
	yaxis: { title: 'kWh' },
	shapes: options.bestFitLines && options.bestFitLines.length
		? _.map(options.bestFitLines, function(line) {
			return {
				type: 'line',
				x0: line.point1.x,
				y0: line.point1.y,
				x1: line.point2.x,
				y1: line.point2.y,
				line: {
					color: line.color,
					width: 3
				}
			}
		})
		: undefined
};

It draws the lines fine except that it rescales the x-axes. Notice that temperature axis (red) has now been expanded to match the water volume axis (blue).

scatter plot - best fit lines

It’s understandable why. Because the shapes property is added to layout at the root level, it gets confused about which axis to draw the lines on, so it “normalizes” all axes. But this is not what we want.

I tried adding the lines to each x-axis separately like so:

for (var i = 0; i < valuesX.length; i++) {
	var value = valuesX[i];
	var line = options.bestFitLines && options.bestFitLines.length
		? _.find(options.bestFitLines, function(line) {
			return line.color === value.color;
		})
		: null;
	layout['xaxis' + (i > 0 ? (i + 1) : '')] = {
		titlefont: { color: value.color },
		tickfont: { color: value.color },
		overlaying: i > 0 ? 'x' : undefined,
		side: i % 2 === 0 ? 'bottom' : 'top',
		shapes: line
			? _.map(options.bestFitLines, function(line) {
				return {
					type: 'line',
					x0: line.point1.x,
					y0: line.point1.y,
					x1: line.point2.x,
					y1: line.point2.y,
					line: {
						color: line.color,
						width: 3
					}
				}
			})
			: undefined
	}
}

But that doesn’t render the lines at all.

Does anyone know how to resolve this issue? Thanks!