# Custom x-axis range

**URL:** <https://community.plotly.com/t/custom-x-axis-range/56128>\
**Category:** plotly.js\
**Created:** [August 31, 2021, 9:08pm UTC](https://community.plotly.com/t/custom-x-axis-range/56128 "2021-08-31T21:08:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dg\_sc](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@dg\_sc](https://community.plotly.com/u/dg_sc)\
**Post date:** [August 31, 2021, 9:08pm UTC](https://community.plotly.com/t/custom-x-axis-range/56128/1 "2021-08-31T21:08:16Z")

</div>

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);