Gantt chart example using vega-lite

Question

I just wanted to share a way to design a simple gantt chart using Vega-lite.

If someone can let me know how to remove the radius from the left edge of the bar that would be very helpful. Otherwise the json spec should be ready to use for the community.

Any other tips to improve this spec would be appreciated. If you find this useful please leave some comments.

I was inspired to design this chart from a Deneb video posted by Hoosier BI a while back.

https://i.sstatic.net/vfxHw.jpg

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 500,
  "data": {
    "values": [
      {
        "name": "Project 1",
        "start": "2023-03-01",
        "end": "2023-03-15",
        "status": "On track",
        "description": "This is the description of project 1."
      },
      {
        "name": "Project 2",
        "start": "2023-03-10",
        "end": "2023-04-15",
        "status": "Delayed",
        "description": "This is the description of project 2."
      },
      {
        "name": "Project 3",
        "start": "2023-04-01",
        "end": "2023-05-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, "cornerRadiusEnd": 10},
      "encoding": {
        "y": {
          "field": "name",
          "type": "nominal",
          "axis": {
            "domain": true,
            "grid": false,
            "ticks": false,
            "labels": true,
            "labelFontSize": 11,
            "labelPadding": 6
          },
          "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": "%Y-%m-%d"}
        }
      }
    }
  ],
  "config": {"view": {"stroke": null}}
} ```


  [1]: https://i.sstatic.net/lVYKB.png

Gantt chart example using vega-lite

Answers (1)

Related Questions