Vegalite Timeline Example

timeline.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Timeline",
  "title": "Hey there",
  "width": 600,
  "height": 200,
  "data": {
    "values": [
      {"idx": 0, "start": 0, "name": "Took a minute", "end": 60000},
      {"idx": 1, "start": 60000, "name": "Took half a minute", "end": 90000},
      {
        "idx": 2,
        "start": 60000,
        "name": "Overlapped with previous",
        "end": 70000
      },
      {"idx": 3, "start": 60500, "name": "Same lane", "end": 70000},
      {"idx": 4, "start": 80500, "name": "Same lane", "end": 90500}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "name", "type": "ordinal", "sort": null, "title": "hi"},
    "x": {"field": "start", "timeUnit": "minutesseconds"},
    "x2": {"field": "end", "timeUnit": "minutesseconds"},
    "color": {"field": "idx", "legend": null},
    "tooltip": {"field": "name"}
  }
}