Milestone-like Rule marks in Vega Lite

Question

I'd like to place milestone placeholders in my chart similar to the ones denoted by yellow arrows in the picture:

image source

Is this possible to achieve this in Vega Lite (X axis is temporal) ? I have checked Rule mark and Text mark its properties but couldn't figure out how to use them to create milestones.

Answer 1

You can do this using layering of a rule and text mark. Here's a short example (view in editor):

{
  "datasets": {
    "line-data": [
      {"x": "2020-01-31", "y": 0.9},
      {"x": "2020-02-29", "y": 0.9},
      {"x": "2020-03-31", "y": 2.0},
      {"x": "2020-04-30", "y": 2.9},
      {"x": "2020-05-31", "y": 3.7},
      {"x": "2020-06-30", "y": 4.4},
      {"x": "2020-07-31", "y": 4.8},
      {"x": "2020-08-31", "y": 6.0},
      {"x": "2020-09-30", "y": 6.6}
    ],
    "rule-data": [
      {"x": "2020-04-01", "y": 5, "labels": "event 1"},
      {"x": "2020-06-01", "y": 6, "labels": "event 2"},
      {"x": "2020-07-01", "y": 8, "labels": "event 3"}
    ]
  },
  "encoding": {
    "x": {"type": "temporal", "field": "x"},
    "y": {"type": "quantitative", "field": "y", "scale": {"domain": [0, 10]}},
    "text": {"type": "nominal", "field": "labels"}
  },
  "layer": [
    {"data": {"name": "line-data"}, "mark": "line"},
    {
      "data": {"name": "rule-data"},
      "mark": {"type": "rule", "strokeDash": [2, 2]}
    },
    {
      "data": {"name": "rule-data"},
      "mark": {"type": "text", "align": "right", "dy": -5}
    }
  ],
  "width": 600
}