Bar Gauge

The Bar Gauge turns a number into a horizontal bar with a threshold marker, so a value reads as how full the bar is and whether it has crossed a limit. It is built with a standard Microsoft List and a small piece of column-formatting JSON. The bar fills to match the value, a dark tick marks the limit from a separate column, and the color shifts as the value approaches and passes that line - green while well under, amber as it nears, red once it goes over. A blank value shows an empty bar labeled No data.

Author

SharePoint Maven

Built with

Lists

Features

JSON, Number Column, Person or Group Column, Single Line of Text Column

Common Use Cases

Budget or spend against a limit
Capacity or utilization against a threshold
Storage or quota usage
Headcount against an approved cap
Hours logged against an estimate
Actual against a planned target

Details

Design Pattern: Metrics & Progress
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Title	Single line of text	`[Title]`
Used	Number	`[Used]`
Limit	Number	`[Limit]`
Owner	Person or Group	`[Owner]`

Prerequisites

Build a list with these columns before you paste the JSON.
Populate the list with data.
Because the JSON is applied at the column level, the Used column can use any name you want.

How to Apply JSON code

On the Used column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
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": "inline-flex",
    "align-items": "center"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "box-sizing": "border-box",
        "width": "172px",
        "height": "24px",
        "flex-shrink": "0"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "0px",
            "right": "0px",
            "top": "3px",
            "height": "18px",
            "border-radius": "9px",
            "background-color": "#d8dde3"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "0px",
            "top": "3px",
            "height": "18px",
            "border-radius": "9px",
            "width": "=(if(Number(@currentField) > 100, 100, if(Number(@currentField) < 0, 0, Number(@currentField)))) + '%'",
            "background-color": "=if(@currentField == '', '#d8dde3', if(Number(@currentField) > Number([$Limit]), '#e83b3e', if(Number(@currentField) >= Number([$Limit]) * 0.85, '#f5a000', '#107c10')))"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0px",
            "height": "24px",
            "width": "2px",
            "border-radius": "1px",
            "background-color": "#323130",
            "left": "=(if(Number([$Limit]) > 100, 100, if(Number([$Limit]) < 0, 0, Number([$Limit])))) + '%'"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "style": {
        "margin-left": "10px",
        "font-size": "14px",
        "font-weight": "600",
        "color": "#201f1e",
        "white-space": "nowrap"
      },
      "txtContent": "=if(@currentField == '', 'No data', @currentField + ' / ' + [$Limit])"
    }
  ]
}

Common Questions About the Bar Gauge

What is the Bar Gauge built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a bar with a threshold line without ongoing development overhead.

What columns does it need?

It needs a Number column for the value, which the bar reads as the current column, and a second Number column named Limit for the threshold marker. Because the JSON refers to the limit by its internal name, that column must be named Limit, while the value column can be named anything since the bar reads the current column.

How is this different from the Percent Progress Bar?

The Percent Progress Bar simply shows how far along a value is. The Bar Gauge adds a threshold marker and changes color as the value approaches and crosses that line, so it answers not just how much but whether you are within the limit – which makes it a fit for budgets, capacity, and quotas.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can Greg build a gauge like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your trackers.