Hello,
Problem
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
Arsh