Target vs Actual Bar

The Target vs Actual Bar shows a single metric as a slim bar sitting on shaded poor, ok, and good bands with a target marker, so a reader sees at a glance not just the number but whether it clears the goal. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a number field. The value bar grows along a 0 to 100 track, the three qualitative bands and the target tick are set in the JSON, and the exact number sits at the end of the bar.

Author

SharePoint Maven

Built with

• Lists

Features

JSON, Number Column, Single Line of Text Column

Category

Formatting

Want one like this?

Talk to Greg

Overview

• Shows a metric as a bar over shaded poor, ok, and good bands, so context comes with the number
• A target tick marks the goal, so clearing or missing it reads instantly
• The value bar grows along a fixed 0 to 100 track for easy row-to-row comparison
• The bands and the target position are set in the JSON and are easy to move to your own thresholds
• The exact value sits at the end of the bar, so you get the picture and the precise figure
• Applied as column-formatting JSON on a number field, so it changes nothing about the underlying data

Common Use Cases

• KPI attainment against a target on a scorecard
• Sales or quota progress by rep or region
• Service levels or CSAT against a goal
• Budget consumed against a cap
• Completion or readiness against a threshold
• Any 0 to 100 metric measured against a target

Details

• Design Pattern: Metrics & Progress
• Format Scope: Column

Required Columns

Prerequisites

1. Build a list with these columns before you paste the JSON.
2. Then populate the list with data on a 0 to 100 scale.
3. Because the JSON is applied at the column level, the Attainment column can use any name you want.
4. The band splits and the target tick (at 80 percent) live in the JSON – move them to match your own goal.
5. Store the value in a Number column on a 0 to 100 scale (a decimal such as 0.73 will not display as 73 percent); the 80 percent target is fixed in the JSON and is not read from a separate Target column.

How to Apply JSON code

1. On the Attainment 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",
    "height": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "width": "170px",
        "min-width": "170px",
        "max-width": "170px",
        "height": "20px",
        "min-height": "20px",
        "max-height": "20px",
        "border-radius": "4px",
        "overflow": "hidden",
        "background-color": "#f3f2f1"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "0",
            "top": "0",
            "width": "34%",
            "height": "100%",
            "background-color": "#f3b8ae"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "34%",
            "top": "0",
            "width": "33%",
            "height": "100%",
            "background-color": "#f7dd94"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "67%",
            "top": "0",
            "width": "33%",
            "height": "100%",
            "background-color": "#a8d8a3"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "left": "0",
            "top": "30%",
            "height": "40%",
            "border-radius": "3px",
            "background-color": "#2f5fa8",
            "width": "=if(Number(@currentField) < 0, 0, if(Number(@currentField) > 100, 100, Number(@currentField))) + '%'"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "80%",
            "width": "3px",
            "height": "100%",
            "background-color": "#1f4480"
          }
        }
      ]
    },
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "margin-left": "8px",
        "font-size": "13px",
        "font-weight": "700",
        "color": "#132a4f"
      }
    }
  ]
}

Common Questions About the Target vs Actual Bar