Mini Trend Line

The Mini Trend Line draws a tiny inline bar chart from a handful of history columns, so each row carries its own recent trend without opening a report. It is built with a standard Microsoft List and a small piece of column-formatting JSON that reads several number columns and renders them as a row of little bars. The most recent bar is highlighted, so the direction of travel is obvious at a glance.

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

• Draws a mini bar chart inline from a handful of history columns
• Each bar’s height reflects that period’s value on a shared 0 to 100 scale
• The most recent bar is highlighted, so the latest point stands out
• Reads six month columns by name, and is easy to extend or shorten in the JSON
• Turns a row of numbers into a trend you can read without a chart web part
• Applied as column-formatting JSON, so it changes nothing about the underlying data

Common Use Cases

• Six-month signups, sales, or traffic per item
• Weekly ticket volume by team
• Monthly spend by category
• Usage or adoption trend per product
• Score history per student or candidate
• Any short series you want shown inline as a trend

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 each row with a value for every month on a 0 to 100 scale.
3. The JSON reads the month columns by name, so their internal names (in brackets) must match the JSON exactly – or edit the names in the JSON to match yours.
4. Apply the formatting to any one of the month columns; it draws the whole series.
5. It shows six fixed monthly bars, January through June, and highlights June – it does not calculate an actual trend or direction.

How to Apply JSON code

1. On the Jun 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": "flex-end",
    "gap": "3px",
    "height": "38px",
    "padding": "0 0 0 14px",
    "box-sizing": "border-box"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#7fb2e0",
        "height": "=(if(Number([$Jan]) < 0, 0, if(Number([$Jan]) > 100, 100, Number([$Jan]))) / 100 * 34) + 'px'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#7fb2e0",
        "height": "=(if(Number([$Feb]) < 0, 0, if(Number([$Feb]) > 100, 100, Number([$Feb]))) / 100 * 34) + 'px'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#7fb2e0",
        "height": "=(if(Number([$Mar]) < 0, 0, if(Number([$Mar]) > 100, 100, Number([$Mar]))) / 100 * 34) + 'px'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#7fb2e0",
        "height": "=(if(Number([$Apr]) < 0, 0, if(Number([$Apr]) > 100, 100, Number([$Apr]))) / 100 * 34) + 'px'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#7fb2e0",
        "height": "=(if(Number([$May]) < 0, 0, if(Number([$May]) > 100, 100, Number([$May]))) / 100 * 34) + 'px'"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "9px",
        "border-radius": "2px 2px 0 0",
        "align-self": "flex-end",
        "background-color": "#0b3b66",
        "height": "=(if(Number([$Jun]) < 0, 0, if(Number([$Jun]) > 100, 100, Number([$Jun]))) / 100 * 34) + 'px'"
      }
    }
  ]
}

Common Questions About the Mini Trend Line