Xaxis type date displaying in the reverse order


#1

I am plotting bar chart with the slider range using react-plotly.js. The xaxis type of the chart is date. I feed in the axis range using a timepicker. When I select the time to be " today" i.e end time in the future, the chart display the xaxis in a reverse order.

Also, you will notice that it doesn’t display any bars even though there exists data during that timerange. Is this an issue with the date format ? or plotly doesn’t work with the future date ?

My plot configuration looks like :
const layout = {
title: this.state.chartTitle,
autosize: true,
dragmode: false,
margin: {
r: 0,
t: 50,
b: 100,
pad: 0,
autoexpand: true
},
hoverlabel: {
bgcolor: ‘rgba(0,0,0,1)’,
bordercolor: ‘rgba(200,200,200,1)’
},
width: this.state.layoutWidth,
height: ‘750’,
yaxis: {

          type: 'linear',
          showgrid: true
        },
        xaxis: {
          type: 'date',
          autorange: false,
          fixedrange: false, // true disables range selection on main graph
          showgrid: false,
          range: this.state.axisRange,
          rangeslider: {
            visible: true,
            range: this.state.sliderRange   
          }
        } 

Also, the time that I am feeding in is in unix format. Before applying to plotly, I am converting it to the datetime format. Is the format that I am applying to the chart correct ?

axisRange: [moment(1544418000000).format('YYYY-MM-DD hh:mm:ss'), moment(1544590799000).format('YYYY-MM-DD hh:mm:ss')],


#2

What does

moment(1544418000000).format('YYYY-MM-DD hh:mm:ss')

output?


#3

it would output: 2019-01-08 12:00:00.
I didnt mention above that the chart does display correctly for other cases. Only when the time difference between axis range start and end is less than a day then it displays in reverse order. When the difference is greater than a day, then chart reads the date correctly and displays in desired fashion(as seen in the image below).