Battery Gauge

The Battery Gauge shows a level as a familiar battery that fills up and shifts color as it drains, so anyone can read how much is left without thinking about the number. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field. The fill grows with the value and turns green when healthy, amber when getting low, and red when nearly empty, with the percent shown beside it.

Author

SharePoint Maven

Built with

Lists

Features

JSON, Number Column, Single Line of Text Column

Common Use Cases

Fuel or charge level on a fleet or device list
Stock or inventory remaining
Budget or hours remaining on a project
License or seat availability
Storage or quota used versus free
Any 0 to 100 level where low should raise a flag

Details

Design Pattern: Metrics & Progress
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Vehicle	Single line of text	`[Title]`
Fuel	Number	`[Fuel]`

Prerequisites

Build a list with these columns before you paste the JSON.
Then populate the list with values from 0 to 100.
Because the JSON is applied at the column level, the Fuel column can use any name you want.
The green, amber, and red thresholds live in the JSON – change them to match your own bands.
Store the value in a Number column on a 0 to 100 scale – a value stored as a decimal such as 0.73 will not display as 73 percent.

How to Apply JSON code

On the Fuel 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",
    "gap": "7px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "46px",
        "height": "22px",
        "border": "2px solid #605e5c",
        "border-radius": "4px",
        "padding": "2px",
        "box-sizing": "border-box",
        "position": "relative"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "height": "100%",
            "border-radius": "2px",
            "width": "=if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField))) + '%'",
            "background-color": "=if(@currentField == '', '#c8c6c4', if(Number(@currentField) >= 50, '#22a06b', if(Number(@currentField) >= 20, '#f59e0b', '#e0523f')))"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "width": "3px",
        "height": "9px",
        "border-radius": "0 2px 2px 0",
        "background-color": "#605e5c"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == '', '-', @currentField + '%')",
      "style": {
        "font-size": "12px",
        "font-weight": "600",
        "color": "#201f1e"
      }
    }
  ]
}

Common Questions About the Battery Gauge

What is the Battery 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 level column that reads like a battery at a glance without ongoing development overhead.

What columns does it need?

It needs one Number column on a 0 to 100 scale, where the JSON is applied, plus any label column such as the item name. The battery and its color are drawn from that single value.

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 I change the color thresholds?

Yes. The points where the battery turns from green to amber to red are numbers in the JSON, set here at 50 and 20 percent. Adjust them so the colors match how your team reads low and healthy levels.

Can Greg build a design 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 lists.