Change Indicator

The Change Indicator shows a number together with how it changed, pairing the current value with a small green or red pill that reads the movement against a prior or target value - up twelve percent, down five percent - so a column of figures tells its own story at a glance. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to the current-value column, which reads a second number column for the comparison. Gains show a green up chip and drops show a red down chip, the percent is rounded for a clean read, and a row with no prior value simply shows the number on its own.

Author

SharePoint Maven

Built with

• Lists

Features

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

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Pairs the current value with a colored chip showing the percent change, so movement reads at a glance
• Gains show a green up chip and declines show a red down chip, computed from the two columns
• The percent is rounded to a whole number for a clean, scannable read
• Compares against any second number column – a prior period, a target, or a baseline
• A row with no prior value shows just the number and no chip, so new items never look broken
• Applied as column-formatting JSON on the current-value column, so it changes nothing about the underlying data

Common Use Cases

• Month-over-month or week-over-week revenue and sales
• Actual versus target on a KPI list
• Headcount, signups, or traffic trends
• Budget spent versus a prior forecast
• Inventory or backlog change since the last count
• Any metric where the change matters as much as the number

Details

• Design Pattern: Status & Indicator Badges
• 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 current value and its prior value.
3. The JSON reads the prior value from the Previous column, so its internal name in brackets must match the JSON exactly – or rename [$Previous] in the JSON to your own column.
4. Apply the formatting to the current-value column, not to the Previous column.
5. The indicator handles comma-formatted numbers and hides itself when the Previous value is blank or zero.

How to Apply JSON code

1. On the This Month 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",
    "justify-content": "space-between",
    "width": "100%",
    "gap": "18px",
    "box-sizing": "border-box",
    "padding-right": "8px"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "=if(@currentField == '', '-', @currentField)",
      "style": {
        "font-weight": "600",
        "color": "#201f1e",
        "white-space": "nowrap"
      }
    },
    {
      "elmType": "span",
      "txtContent": "=if(if(@currentField == '', false, if([$Previous] == '', false, if(Number(replaceAll(toString([$Previous]), ',', '')) == 0, false, true))), if((Number(replaceAll(toString(@currentField), ',', '')) - Number(replaceAll(toString([$Previous]), ',', ''))) >= 0, '▲ +', '▼ -') + floor(abs((Number(replaceAll(toString(@currentField), ',', '')) - Number(replaceAll(toString([$Previous]), ',', ''))) / Number(replaceAll(toString([$Previous]), ',', '')) * 100) + 0.5) + '%', '')",
      "style": {
        "display": "=if(if(@currentField == '', false, if([$Previous] == '', false, if(Number(replaceAll(toString([$Previous]), ',', '')) == 0, false, true))), 'inline-flex', 'none')",
        "align-items": "center",
        "justify-content": "center",
        "font-size": "13px",
        "font-weight": "700",
        "padding": "2px 9px",
        "border-radius": "12px",
        "white-space": "nowrap",
        "color": "=if((Number(replaceAll(toString(@currentField), ',', '')) - Number(replaceAll(toString([$Previous]), ',', ''))) >= 0, '#0f7a3d', '#c1352b')",
        "background-color": "=if((Number(replaceAll(toString(@currentField), ',', '')) - Number(replaceAll(toString([$Previous]), ',', ''))) >= 0, '#e7f5ee', '#fdeaea')"
      }
    }
  ]
}

Common Questions About the Change Indicator