Gantt Bar

The Gantt Bar draws a colored bar spanning from a start date to an end date across the cell, so a list of phases or tasks reads like a mini schedule right in the view. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the end-date column, which reads a second column for the start date. Both dates are placed on a shared rolling window so the bars line up row to row.

Author

SharePoint Maven

Built with

• Lists

Features

Date and Time Column, JSON, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Draws a bar from a start date to an end date across the cell
• Places every bar on a shared window, so rows line up like a schedule
• Turns a task or phase list into a mini Gantt view
• Reads two date columns – a start and an end
• The window around today is set in the JSON and easy to change
• Applied as column-formatting JSON on the end-date column, so it changes nothing about the underlying data

Common Use Cases

• Project phases with start and end dates
• Task durations on a plan
• Campaign or event run periods
• Booking or reservation spans
• Assignment or coverage windows
• Any pair of dates you want shown as a duration bar

Details

• Design Pattern: Dates & Time
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate each row with a start date and an end date.
3. The JSON reads the start date from the Start column, so its internal name in brackets must match the JSON exactly – or rename [$Start] in the JSON to your own column.
4. Apply the formatting to the end-date column, not to the Start column.
5. The chart shows a fixed window of about 15 days before today through 75 days after today – dates outside that range are pulled to the nearest edge.

How to Apply JSON code

1. On the End column, open the column header menu, choose Column settings, then Format this column.
2. Switch to Advanced mode.
3. Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "width": "100%",
    "height": "100%",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "width": "100%",
        "height": "14px",
        "min-height": "14px",
        "max-height": "14px",
        "background-color": "#eeecea",
        "border-radius": "7px",
        "overflow": "hidden",
        "box-sizing": "border-box"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "=if(if(@currentField == '', false, if([$Start] == '', false, true)), 'block', 'none')",
            "position": "absolute",
            "top": "0",
            "height": "100%",
            "border-radius": "7px",
            "background-color": "#0f6cbd",
            "left": "=(if((((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100 < 0, 0, if((((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100 > 100, 100, (((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100))) + '%'",
            "width": "=((if((((Number(Date(@currentField)) - Number(@now)) / 86400000) + 15) / 90 * 100 < 0, 0, if((((Number(Date(@currentField)) - Number(@now)) / 86400000) + 15) / 90 * 100 > 100, 100, (((Number(Date(@currentField)) - Number(@now)) / 86400000) + 15) / 90 * 100))) - (if((((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100 < 0, 0, if((((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100 > 100, 100, (((Number(Date([$Start])) - Number(@now)) / 86400000) + 15) / 90 * 100)))) + '%'"
          }
        }
      ]
    }
  ]
}

Common Questions About the Gantt Bar