Custom x-axis range

plotly.js
1

Hi, is there a straightforward way to create a custom x-axis range that both increases and decreases. So I would like the y axis center line to be where the x axis is 1 and the full x axis range/gridmarks to be [[0, -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, -0.9, 1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0]. I created a toy example in codepen that seemed to work but it’s a bit hacky because I have to create two separate plots and it doesn’t seem to work with my real data so I was wanting to know if there was a better way. Thank you

var trace2 = {
y: [0, 1, 2],
x: [-0.7, -0.9, -0.8],
xaxis: ‘x2’,
type: ‘scatter’
};

var trace1 = {
y: [2, 3, 4],
x: [0.7, 0.8, 0.9],
type: ‘scatter’
};

var data = [trace1, trace2];

var layout = {
xaxis: {
domain: [0, 0.5],
range: [0.5,1],
tickvals: [[0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]},
legend: {traceorder: ‘reversed’},
xaxis2: {
domain: [0.5, 1],
range: [-1,-0.5],
tickvals: [0, -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, -0.9]},
};

Plotly.newPlot(‘myDiv’, data, layout);