Thermometer Bar (Column Formatting)
Overview
- Shows a percent toward a goal as a vertical tube that fills from a bulb at the bottom upward
- Color climbs with progress – amber under 50%, blue from 50 to 99%, and green at the 100% goal
- The exact percentage sits beside the thermometer for a precise read
- Values above 100 or below 0 are clamped, and a blank cell shows an empty tube
- Built from plain divs, so it is light and works in any standard list
- Uses the current column, so the same JSON works on any percent field without editing
Common Use Cases
- Fundraising and campaign goals
- Sales or quota attainment
- Membership or signup targets
- Survey or response collection goals
- Capacity or utilization toward a limit
- Savings or budget targets
How to Apply JSON Formatting
Note – the thermometer uses the current column (@currentField), so you apply it directly to your percent column and the column name does not need to match anything. It expects a Number from 0 to 100; values outside that range are clamped and a blank cell shows an empty tube. Change the color thresholds in the JSON to match your own scale.
1. Create a list with the following columns:
[Title] Single line of text
[% to Goal] Number (0 to 100)
[Owner] Person
[Target] Single line of text
2. Populate the list with data.
3. On the % to Goal column, open the column header menu, choose Column settings, then Format this column.
4. Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code – Select, Copy and Paste
{
"$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", "width": "20px", "height": "50px" },
"children": [
{
"elmType": "div",
"style": {
"position": "absolute", "left": "5px", "top": "0px",
"width": "10px", "height": "38px",
"border-radius": "5px", "overflow": "hidden",
"background-color": "#edebe9"
},
"children": [
{
"elmType": "div",
"style": {
"position": "absolute", "left": "0px", "bottom": "0px", "width": "100%",
"height": "=(if(@currentField == '', 0, if(Number(@currentField) > 100, 100, if(Number(@currentField) < 0, 0, Number(@currentField))))) + '%'",
"background-color": "=if(@currentField == '', '#c8c6c4', if(Number(@currentField) >= 100, '#107c10', if(Number(@currentField) >= 50, '#0078d4', '#ffaa44')))"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute", "bottom": "0px", "left": "2px",
"width": "16px", "height": "16px", "border-radius": "50%",
"background-color": "=if(@currentField == '', '#c8c6c4', if(Number(@currentField) >= 100, '#107c10', if(Number(@currentField) >= 50, '#0078d4', '#ffaa44')))"
}
}
]
},
{
"elmType": "span",
"style": {
"margin-left": "8px", "font-size": "12px", "font-weight": "600",
"color": "=if(@currentField == '', '#a19f9d', if(Number(@currentField) >= 100, '#107c10', if(Number(@currentField) >= 50, '#0078d4', '#9a6212')))"
},
"txtContent": "=(if(@currentField == '', 0, if(Number(@currentField) > 100, 100, if(Number(@currentField) < 0, 0, Number(@currentField))))) + '%'"
}
]
}Common Questions About the Thermometer Bar
What is the Thermometer Bar built with?
It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON made entirely of nested divs – no SVG needed. 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 polished list without ongoing development overhead.
What kind of column does it need?
It needs a single Number column that stores a value from 0 to 100, such as percent toward a goal. The JSON reads the current column rather than a fixed name, so you can reuse it on any percent field, and the column name does not need to match anything.
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 existing columns and views look, 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.
What if I track a value and a target instead of a percent?
Convert it to a percent first – a simple calculated column of current divided by target times 100 gives the 0 to 100 value the thermometer reads. Then point the formatting at that calculated column and the tube fills to the right level.
Can Greg build formatting 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.
