plotly.js: Rangeselector is not relative to X-axis data in scatter/lines+marker plots

When drawing a scatter plot with a mode of lines+marker with an xaxis rangeselector enabled, changing ranges results in a range being shown that isn’t relative to the actual data itself.

My example is at https://codepen.io/davidjb/pen/dJYWaV (a fork of the example from https://plot.ly/javascript/range-slider/) – changing between lines and lines+markers down the very bottom shows the difference in behaviour.

With a mode of lines, a plot’s X axis ends where the data does, and so choosing 1m, 6m and so in the range selector result in a plot that shows that during from the end of the dataset. In lines+markers, however, choosing a range is relative to the end of the original plot, resulting in an empty or partially empty plot because the range will extend past the end of the dataset. Depending on how spread out your data is, this could result in a fully empty plot (like the example, where it shows a range in 2019 for a dataset in 2016) or a partially visible trace on the left-hand side.

My expectation was that the rangeselector would always operate relative to the data – so in this case being the same behaviour between lines and lines+marker.

Seems related to #928, with regards to the ‘padding’ on the far right of the plot. Example tested with plotly.js 1.13.2 (latest at time of writing).

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Reactions: 5
  • Comments: 16 (9 by maintainers)

Most upvoted comments

Has this been fixed or is there any way around it? I tried fixing the range manually but it does not work with the buttons in “backward” mode. The plot starts zoomed in the correct range, but the count for “1 month backward” starts from 3 months in future w.r.t. to my latest date. Moreover fixing the range just determines a correct zoom, not the maximum range of the data to see

Double click is not the only issue, the axis don’t line up when using range selector buttons either…

…Looking for a python solution myself

Good point @davidjb - we hadn’t considered padded ranges like you get with markers in the behavior of range selectors, but it’s pretty useless this way. See also #1876 - the right way to solve the issue here probably needs to be a new autorange mode (which can account for data) rather than a calculation based on the current range as we have now (which knows nothing about the data). This would also be useful for streaming plots where you always want to see for example the last 15 minutes of data.