Black Lives Matter. Please consider donating to Black Girls Code today.

Date type x-axis and negative xaxis label



I am plotting real time sensor data with Plotlyjs against timestamp with x-axis as date-type. This works really good. However, I woulld like the time to start from ‘00:00:00’ and move forward, where as I do not want to show the x-label on negative xaxis on zoom or pan.

Tried ways

Things that I have tried are:
1 - whenever I received a sensor value, I save it with a date object, and then before plotting I subtracted all the successive values of date from the first data point date, this results in a date time of ‘01-01-1970 00:00:00’ and then I formatted xaxis labels as “%H:%M:%S” which works until someone zooms or pans the graph.

2 - I tried to send rangemode to ‘nonnegative’ and ‘tozero’ in plotly layout.

3 - I was thinking of not showing the negative axis on zoom and pan, had there been an event that was fired ‘before’ zoom or pan. However, ‘plotly_relayout’ seems to be fired after the panning has occurred.

4 - I also tried to pass a callback function to layout.xaxis.tickformat but that did not work also.

Minimum working code:

The following is a minimum working example. I am using VueJS and Vue-PlotlyJS wrapper.

Undesirable Behavior:

If you zoom out the graph in Codesand, you will notice this,

Similar behavior from one of the graph in my local project:

Expected behavior/solution:

If there is a way to pass a function to tickformatter that provides the current timestamp value as one function argument and the function returns a formatted string that is to be drawn on the x-axis label. I can check if that argument (i.e. timestamp) is greater than the date in time data point and return a formatted string else I can pass an empty string. A similar solution.

Previous Posts (apologies if it feels spamming)

I also want to mention that I posted a similar question to PlotlyJS github issues, as well as on Stackoverflow. The stackoverflow question was closed (for some reasons) whereas I did not receive any response on Github issues.

I look forward to any suggestions, workaround.

Thank you