Dates on x-axis not spaced appropriately

plotly.js
1

I’m trying to make a timeline plot that basically has no y-axis, just an x-axis with dates, and annotations showing when events occurred. I put dates in the x-values, but they are getting spaced evenly, rather than at the correct spacing (the dates themselves are not spaced evenly). Here is a fiddle. Feel free to edit.

https:// jsfiddle.net/ abalter/98phb124/

2

Here’s a working version: https://jsfiddle.net/etpinard/98phb124/3/

To note:

  • plotly understands only a limited set strings as dates (see list here). If your using plotly.js directly, I recommend always converting your date string to date timestamps using (new Date(year, month, day)).getTime()) for the most consistent results.
  • To show specific axis tick labels, use xaxis.tickvals and xaxis.ticktext to position and mark each tick labels.
2 Likes
3

Awesome! Thanks for the fiddle and the link.

4

Hi,

Very new to plotly, and in reseaching an issue I’m trying to fix, I saw this question and thought it might have some relevance. But the fiddle actually highlighted the issue I am having. If I updated the fiddle to show the y axis line, the first date on the x axis does not align with the y axis. Is there a way to do that?

Thanks in advance for any guidance.

5

Hi @rander1870,

Please make a fiddle that shows me your situation NOT working. I’ll take a look and see if I can figure out what is going on.

6

Thanks for the quick response. I was able to resolve my issue by explicitly setting the range on the x-axis (layout.xaxis.range) to an array containing the first and last dates from my data, and that closed the gaps.