[Request] Skipping missing time intervals in line plots

It has been brought up here several times (e.g.) that there are problems with how plotly handles missing data when the x-axis is a time series.

In particular there is no elegant way to act as if the missing intervals just don’t exist. There are nice built-in ways to interpolate or leave visible gaps, but currently our best choices for ignoring missing values are:

  1. Set fig['layout']['xaxis']['type'] = 'category'. This has the desired effect on the line plot but generally makes the x-axis unreadable.
  2. Customise the x-axis with enumerated ticks. This introduces a whole lot more work.

The below example generates some plausible looking intraday stock prices over a multi-day period and plots them with interpolation. As you can see it’s dominated by times when the market is closed:

import pandas as pd
import numpy as np
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, plot, iplot
# generate some plausible data
times = pd.date_range(start='2019-05-24', end='2019-05-28', freq='30min')
values = 100 + np.random.normal(size=len(times)).cumsum()
prices = (pd.Series(index=times, data=values)
    .loc[lambda s: s.index.dayofweek < 5]
    .between_time('09:30', '16:00'))
trace = go.Scatter(x=prices.index, y=prices)
data = [trace]
fig = go.Figure(data=data)

The x-axis looks great, but the graph itself isn’t that useful:

Now if we set fig['layout']['xaxis']['type'] = 'category', the graph looks nice but the x-axis is useless.

I think it would be great if we could get a way to handle this gracefully, because not having this feature dramatically reduces the usefulness of timeseries plots, which is a pity because when they work as intended they do some clever stuff to make the x-axis look nice.


For inspiration, here’s how Bloomberg does it


I optimistically did some digging through the source code and while I couldn’t figure out where the date magic happens (my javascript is pretty limited), I did find the package which I imagine provides the solution: d3fc-discontinuous-scale, which has a demo here.

Now, anyone know how (or indeed, where) this would fit into plotly.js?