Very Simple Gantt

very_simple_gantt.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "phase": "0",
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "pay": "2023-04-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "phase": "1",
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "pay": "2023-05-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "phase": "2",
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-15",
        "pay": "2023-06-15",
        "status": "Behind schedule",
        "description": "This is the description of project 3."
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(utcFormat(now(), '%Y-%m-%d'))", "as": "currentDate"}
  ],
  "title": {
    "text": "Gantt Chart with Rule Line for Today's Date",
    "fontSize": 14,
    "anchor": "start",
    "dy": -15,
    "color": "#706D6C"
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusTopRight": 4,
        "cornerRadiusBottomRight": 4
      },
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 14,
            "labelPadding": 10,
            "labelFontWeight": {
              "condition": {
                "test": {"field": "datum.phase", "equal": "0"},
                "value": "bold"
              },
              "value": "normal"
            }
          },
          "title": null
        },
        "x": {
          "field": "start",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "format": "%d-%b",
            "domain": true,
            "grid": false,
            "ticks": true,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "title": null
        },
        "x2": {"field": "end"},
        "color": {
          "title": null,
          "field": "status",
          "type": "nominal",
          "legend": {
            "padding": 0,
            "labelFontSize": 11,
            "labelColor": "#706D6C",
            "rowPadding": 8,
            "symbolOpacity": 0.9,
            "symbolType": "square"
          }
        }
      }
    },
    {
      "mark": {"type": "rule", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {
        "x": {
          "field": "currentDate",
          "type": "temporal",
          "axis": {"format": "%d-%b"}
        }
      }
    },
    {
      "mark": {"type": "tick", "thickness": 1, "bandSize": 2, "color": "gray"},
      "encoding": {
        "x": {"field": "pay", "type": "temporal", "axis": {"format": "%d-%b"}},
        "y": {"field": "name", "type": "nominal", "title": null}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "right",
        "baseline": "middle",
        "dx": -5
      },
      "encoding": {
        "x": {"field": "pay", "type": "temporal"},
        "y": {"field": "name", "type": "nominal"},
        "text": {"field": "pay", "type": "temporal", "format": "%d-%b"},
        "color": {"value": "gray"}
      }
    }
  ],
  "config": {"view": {"stroke": null}}
}