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.stack.imgur.com/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.stack.imgur.com/lVYKB.png

I wanted the left side of the bars to be squared off but the right side rounded like now. — APB Reports, Mar 24 '23 at 12:19

score 2 · Accepted Answer · answered Mar 24 '23 at 13:56

Here you go.

 {"$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, "cornerRadiusTopRight": 10,"cornerRadiusBottomRight": 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}}
}

Perfect. Thanks David! Hopefully other people will find this template useful. — APB Reports, Mar 24 '23 at 14:50
I have uploaded another Gantt Chart BTW. Check it out here: https://github.com/PBI-David/Deneb-Showcase — Davide Bacci, Mar 26 '23 at 12:15
Wow David. That chart spec is insanely good. I will have a good look at this and will definitively implement it at my clients. Thanks! — APB Reports, Mar 27 '23 at 08:42
You should add the ability to scroll across in your chart. If you set "id": 18 with: "end": "31/03/2024" the chart gets clipped. It would have been great for a user to scroll across but keep the data columns locked in place. Also when you scroll down the Month names and days at the top should have been locked and always visible. — APB Reports, Mar 27 '23 at 09:14
Scrolling isn't possible in Vega. However, the way it is set up, it scrolls perfectly in Deneb. Unfortunately, nothing can be locked on scroll and the whole screen must scroll. — Davide Bacci, Mar 27 '23 at 09:30
Id 18 is a milestone and must have the same start and end date. If you do that, the chart expands accordingly. — Davide Bacci, Mar 27 '23 at 09:36
I was thinking something like this functionality: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Overview/jQuery/Light/ Ability to scroll, minimize projects etc. — APB Reports, Mar 27 '23 at 10:11
The collapsing can be done but the scroll is not possible using Vega. — Davide Bacci, Mar 27 '23 at 10:19

Gantt chart example using vega-lite

1 Answers1

Linked