Multiple X-Axis with Manual range not working as expected

As you can see in the image i have two X-Axis and two Y-axis .

  • Bottom X-axis has its Y-Axis on left side .
  • Top X-Axis has its Y-Axis on right side.

I set the range for both the x-axis manually. In the image above my range values are ,
Min : 2018-01-03 14:14:22.000 and Max: 2018-01-03 14:57:34.922

But as you see the top x-axis starts from 14:15 and bottom starts from 14:25. I guess it is decided based on the data maybe?

But how can i force the range values which is given manually instead of based on the data available?

My layout options for x-axis below:

xaxis2: {
showline: true,
type: โ€˜dateโ€™,
overlaying: โ€˜xโ€™,
side: โ€˜topโ€™,
range : ,
}

xaxis: {
showline: true,
type: โ€˜dateโ€™,
zerolinecolor: โ€˜#969696โ€™,
zerolinewidth: 4,
range : ,
}