Vega-Lite - Skip week-end (non-business days) in temporal axis

Question

I'm using Vega-Lite to create a simple line chart to plot stock prices.

The problem with the chart is the zones marked in grey, which correspond to week-ends. The market is only open on week-days so I don't want the horizontal axis (date) to show week-ends as it becomes "false" from a finance point of view. Basically a business hour is 9am to 16pm (week-end excluded) and I would like the x-axis to reflect that.

How can I skip the non-business days (here Saturday/Sunday) on a temporal axis?

Here is the underlying data:

Symbol,Date,Close
AMZN,2020/08/10 10:00,3170
AMZN,2020/08/10 11:00,3104.11
AMZN,2020/08/10 12:00,3134.05
AMZN,2020/08/10 13:00,3140.38
AMZN,2020/08/10 14:00,3138.15
AMZN,2020/08/10 15:00,3149.16
AMZN,2020/08/10 16:00,3149.87
AMZN,2020/08/10 17:00,3137.6
FB,2020/08/10 10:00,267.75
FB,2020/08/10 11:00,260.75
FB,2020/08/10 12:00,264.32
FB,2020/08/10 13:00,263.24
FB,2020/08/10 14:00,262.08
FB,2020/08/10 15:00,262.38
FB,2020/08/10 16:00,263
FB,2020/08/10 17:00,263.09
AMZN,2020/08/11 10:00,3121
AMZN,2020/08/11 11:00,3123.5
AMZN,2020/08/11 12:00,3135.33
AMZN,2020/08/11 13:00,3143.11
AMZN,2020/08/11 14:00,3135.1
AMZN,2020/08/11 15:00,3121.76
AMZN,2020/08/11 16:00,3080.67
AMZN,2020/08/11 17:00,3085.99
FB,2020/08/11 10:00,260
FB,2020/08/11 11:00,263.95
FB,2020/08/11 12:00,263.83
FB,2020/08/11 13:00,264.59
FB,2020/08/11 14:00,263.78
FB,2020/08/11 15:00,260.29
FB,2020/08/11 16:00,256.11
FB,2020/08/11 17:00,256.6
AMZN,2020/08/12 10:00,3151.62
AMZN,2020/08/12 11:00,3143.74
AMZN,2020/08/12 12:00,3152.53
AMZN,2020/08/12 13:00,3153.75
AMZN,2020/08/12 14:00,3167.69
AMZN,2020/08/12 15:00,3158.09
AMZN,2020/08/12 16:00,3158.7
AMZN,2020/08/12 17:00,3160.51
FB,2020/08/12 10:00,261.8
FB,2020/08/12 11:00,262.27
FB,2020/08/12 12:00,261.44
FB,2020/08/12 13:00,260.1
FB,2020/08/12 14:00,261.68
FB,2020/08/12 15:00,260.73
FB,2020/08/12 16:00,259.83
FB,2020/08/12 17:00,259.7
AMZN,2020/08/13 10:00,3181
AMZN,2020/08/13 11:00,3201.73
AMZN,2020/08/13 12:00,3209.34
AMZN,2020/08/13 13:00,3195.99
AMZN,2020/08/13 14:00,3198.41
AMZN,2020/08/13 15:00,3181.06
AMZN,2020/08/13 16:00,3170.61
AMZN,2020/08/13 17:00,3161.02
FB,2020/08/13 10:00,261.8
FB,2020/08/13 11:00,262.88
FB,2020/08/13 12:00,264.13
FB,2020/08/13 13:00,262.36
FB,2020/08/13 14:00,262.11
FB,2020/08/13 15:00,261.06
FB,2020/08/13 16:00,259.98
FB,2020/08/13 17:00,261.49

For comparison, here is how it looks like on Google Finance (single step between Fri/Mon, same as Thu/Fri)

Thanks in advance for the help!

Answer 1

You can do this by using an ordinal x-axis encoding with an appropriate timeUnit. This will result in an axis that only reflects values actually present in your data.

For example (open in editor):

{
  "mark": "line",
  "encoding": {
    "x": {"field": "Date", "timeUnit": "yearmonthdatehours", "type": "ordinal", "axis": {"labelAngle": -45}},
    "y": {"field": "Close", "type": "quantitative", "scale": {"zero": false}},
    "color": {"field": "Symbol", "type": "nominal"},
    "row": {"field": "Symbol", "type": "nominal"}
  },
  "width": 600,
  "height": 120,
  "resolve": {"scale": {"y": "independent"}},
  "data": {
    "values": [
      {"Symbol": "AMZN", "Date": "2020/08/10 10:00", "Close": 3170},
      {"Symbol": "AMZN", "Date": "2020/08/10 11:00", "Close": 3104.11},
      {"Symbol": "AMZN", "Date": "2020/08/10 12:00", "Close": 3134.05},
      {"Symbol": "AMZN", "Date": "2020/08/10 13:00", "Close": 3140.38},
      {"Symbol": "AMZN", "Date": "2020/08/10 14:00", "Close": 3138.15},
      {"Symbol": "AMZN", "Date": "2020/08/10 15:00", "Close": 3149.16},
      {"Symbol": "AMZN", "Date": "2020/08/10 16:00", "Close": 3149.87},
      {"Symbol": "AMZN", "Date": "2020/08/10 17:00", "Close": 3137.6},
      {"Symbol": "FB", "Date": "2020/08/10 10:00", "Close": 267.75},
      {"Symbol": "FB", "Date": "2020/08/10 11:00", "Close": 260.75},
      {"Symbol": "FB", "Date": "2020/08/10 12:00", "Close": 264.32},
      {"Symbol": "FB", "Date": "2020/08/10 13:00", "Close": 263.24},
      {"Symbol": "FB", "Date": "2020/08/10 14:00", "Close": 262.08},
      {"Symbol": "FB", "Date": "2020/08/10 15:00", "Close": 262.38},
      {"Symbol": "FB", "Date": "2020/08/10 16:00", "Close": 263},
      {"Symbol": "FB", "Date": "2020/08/10 17:00", "Close": 263.09},
      {"Symbol": "AMZN", "Date": "2020/08/11 10:00", "Close": 3121},
      {"Symbol": "AMZN", "Date": "2020/08/11 11:00", "Close": 3123.5},
      {"Symbol": "AMZN", "Date": "2020/08/11 12:00", "Close": 3135.33},
      {"Symbol": "AMZN", "Date": "2020/08/11 13:00", "Close": 3143.11},
      {"Symbol": "AMZN", "Date": "2020/08/11 14:00", "Close": 3135.1},
      {"Symbol": "AMZN", "Date": "2020/08/11 15:00", "Close": 3121.76},
      {"Symbol": "AMZN", "Date": "2020/08/11 16:00", "Close": 3080.67},
      {"Symbol": "AMZN", "Date": "2020/08/11 17:00", "Close": 3085.99},
      {"Symbol": "FB", "Date": "2020/08/11 10:00", "Close": 260},
      {"Symbol": "FB", "Date": "2020/08/11 11:00", "Close": 263.95},
      {"Symbol": "FB", "Date": "2020/08/11 12:00", "Close": 263.83},
      {"Symbol": "FB", "Date": "2020/08/11 13:00", "Close": 264.59},
      {"Symbol": "FB", "Date": "2020/08/11 14:00", "Close": 263.78},
      {"Symbol": "FB", "Date": "2020/08/11 15:00", "Close": 260.29},
      {"Symbol": "FB", "Date": "2020/08/11 16:00", "Close": 256.11},
      {"Symbol": "FB", "Date": "2020/08/11 17:00", "Close": 256.6},
      {"Symbol": "AMZN", "Date": "2020/08/12 10:00", "Close": 3151.62},
      {"Symbol": "AMZN", "Date": "2020/08/12 11:00", "Close": 3143.74},
      {"Symbol": "AMZN", "Date": "2020/08/12 12:00", "Close": 3152.53},
      {"Symbol": "AMZN", "Date": "2020/08/12 13:00", "Close": 3153.75},
      {"Symbol": "AMZN", "Date": "2020/08/12 14:00", "Close": 3167.69},
      {"Symbol": "AMZN", "Date": "2020/08/12 15:00", "Close": 3158.09},
      {"Symbol": "AMZN", "Date": "2020/08/12 16:00", "Close": 3158.7},
      {"Symbol": "AMZN", "Date": "2020/08/12 17:00", "Close": 3160.51},
      {"Symbol": "FB", "Date": "2020/08/12 10:00", "Close": 261.8},
      {"Symbol": "FB", "Date": "2020/08/12 11:00", "Close": 262.27},
      {"Symbol": "FB", "Date": "2020/08/12 12:00", "Close": 261.44},
      {"Symbol": "FB", "Date": "2020/08/12 13:00", "Close": 260.1},
      {"Symbol": "FB", "Date": "2020/08/12 14:00", "Close": 261.68},
      {"Symbol": "FB", "Date": "2020/08/12 15:00", "Close": 260.73},
      {"Symbol": "FB", "Date": "2020/08/12 16:00", "Close": 259.83},
      {"Symbol": "FB", "Date": "2020/08/12 17:00", "Close": 259.7},
      {"Symbol": "AMZN", "Date": "2020/08/13 10:00", "Close": 3181},
      {"Symbol": "AMZN", "Date": "2020/08/13 11:00", "Close": 3201.73},
      {"Symbol": "AMZN", "Date": "2020/08/13 12:00", "Close": 3209.34},
      {"Symbol": "AMZN", "Date": "2020/08/13 13:00", "Close": 3195.99},
      {"Symbol": "AMZN", "Date": "2020/08/13 14:00", "Close": 3198.41},
      {"Symbol": "AMZN", "Date": "2020/08/13 15:00", "Close": 3181.06},
      {"Symbol": "AMZN", "Date": "2020/08/13 16:00", "Close": 3170.61},
      {"Symbol": "AMZN", "Date": "2020/08/13 17:00", "Close": 3161.02},
      {"Symbol": "FB", "Date": "2020/08/13 10:00", "Close": 261.8},
      {"Symbol": "FB", "Date": "2020/08/13 11:00", "Close": 262.88},
      {"Symbol": "FB", "Date": "2020/08/13 12:00", "Close": 264.13},
      {"Symbol": "FB", "Date": "2020/08/13 13:00", "Close": 262.36},
      {"Symbol": "FB", "Date": "2020/08/13 14:00", "Close": 262.11},
      {"Symbol": "FB", "Date": "2020/08/13 15:00", "Close": 261.06},
      {"Symbol": "FB", "Date": "2020/08/13 16:00", "Close": 259.98},
      {"Symbol": "FB", "Date": "2020/08/13 17:00", "Close": 261.49}
    ]
  }
}