SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Gauge Aggregate Footer

This sample shows a gauge in the list footer (when aggregates are enabled).

Get this format View on GitHub

Shared by Chris Kent
Updated Apr 4, 2022

Gauge Aggregate Footer formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "footerFormatter": {
    "elmType": "div",
    "attributes": {
      "title": "(@columnAggregate.value)/10"
    },
    "children": [
      {
        "elmType": "svg",
        "style": {
          "width": "120px",
          "height": "60px"
        },
        "attributes": {
          "viewBox": "0 0 60 30"
        },
        "children": [
          {
            "elmType": "path",
            "style": {
              "fill": "#000000"
            },
            "attributes": {
              "d": "m 29.994597,26.96385 a 3.0005242,2.9995135 0 0 0 -3.000562,2.99954 h 6.001125 a 3.0005242,2.9995135 0 0 0 -3.000563,-2.99954 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#c23800"
            },
            "attributes": {
              "d": "m 26.563585,19.290748 a 11.251965,11.248175 36 0 0 -5.65065,4.084052 l 3.03227,2.203073 a 7.5013097,7.4987832 36 0 1 3.775342,-2.72672 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#ea4300"
            },
            "attributes": {
              "d": "M 20.776908,1.4816213 A 30.005242,29.995135 36 0 0 5.7503318,12.358524 L 20.912935,23.3748 a 11.251965,11.248175 36 0 1 5.650003,-4.085799 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#d89d00"
            },
            "attributes": {
              "d": "m 33.540525,19.323632 a 11.251965,11.248175 72 0 0 -6.972018,-0.0173 l 1.158225,3.564647 a 7.5013097,7.4987832 72 0 1 4.657041,0.01313 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#ffb900"
            },
            "attributes": {
              "d": "M 39.326947,1.514422 A 30.005242,29.995135 72 0 0 20.776908,1.4816213 l 5.791599,17.8247097 a 11.251965,11.248175 72 0 1 6.972521,0.01551 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#99b208"
            },
            "attributes": {
              "d": "m 39.170837,23.435679 a 11.248175,11.251965 18 0 0 -5.630312,-4.112046 l -1.158224,3.564648 a 7.4987832,7.5013097 18 0 1 3.759908,2.747962 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#bad80a"
            },
            "attributes": {
              "d": "M 54.320142,12.428898 A 29.995135,30.005242 18 0 0 39.332125,1.4989228 l -5.7916,17.8247092 a 11.248175,11.251965 18 0 1 5.631772,4.110893 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#0c580c"
            },
            "attributes": {
              "d": "M 41.308854,30.071809 A 11.248175,11.251965 54 0 0 39.170836,23.43568 l -3.03227,2.203073 a 7.4987832,7.5013097 54 0 1 1.426617,4.433167 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#107c10"
            },
            "attributes": {
              "d": "M 60.034523,30.071674 A 29.995135,30.005242 54 0 0 54.333441,12.419403 L 39.170837,23.435679 a 11.248175,11.251965 54 0 1 2.139877,6.636055 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#b3292c"
            },
            "attributes": {
              "d": "m 18.774918,30.01093 a 11.251965,11.248175 36 0 1 2.138018,-6.636129 l 3.03227,2.203073 a 7.5013097,7.4987832 36 0 0 -1.426617,4.433167 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#d13438"
            },
            "attributes": {
              "d": "M 0.049249,30.010795 A 30.005242,29.995135 36 0 1 5.750331,12.358524 L 20.912935,23.3748 a 11.251965,11.248175 36 0 0 -2.139877,6.636055 z"
            }
          },
          {
            "elmType": "path",
            "style": {
              "fill": "#000000"
            },
            "attributes": {
              "d": "='M 28 29 L ' + toString(30+26*cos(3.14159265+3.14159265*if((@columnAggregate.value)/10>0.95,.95,if((@columnAggregate.value)/10<.05,.05,(@columnAggregate.value)/10)))+if((@columnAggregate.value)/10 < .5,-1,0)) + ' ' + toString(30+26*sin(3.14159265+3.14159265*if((@columnAggregate.value)/10>0.95,.95,if((@columnAggregate.value)/10<.05,.05,(@columnAggregate.value)/10)))+if((@columnAggregate.value)/10 < .25,2,0)) + ' L ' + toString(30+26*cos(3.14159265+3.14159265*if((@columnAggregate.value)/10>0.95,.95,if((@columnAggregate.value)/10<.05,.05,(@columnAggregate.value)/10)))+if((@columnAggregate.value)/10 > .5,1,0)) + ' ' + toString(30+26*sin(3.14159265+3.14159265*if((@columnAggregate.value)/10>0.95,.95,if((@columnAggregate.value)/10<.05,.05,(@columnAggregate.value)/10)))+if((@columnAggregate.value)/10 > .75,2,0)) +' L 32 29 Z'"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitiongauge-aggregate-footer.json

From the contributor

How to use this sample

Summary

This sample shows a gauge in the list footer (when aggregates are enabled).

Screenshot of the sample

View requirements

Type Internal Name Required
Number any Yes

This format can be applied to any list where a column has an aggregate function (ie sum, average, etc.).

The format assumes a value between 0 and 10 (and is converting to a percentage). To change the total, you can do a find and replace to change the expression. For instance you can find all instances of (@columnAggregate.value)/10 and replace with (@columnAggregate.value)/100 if the range is 0-100. If using a number stored as a percent you can simply replace the (@columnAggregate.value)/10 with @columnAggregate.value.

By default, this format will be applied to ALL aggregate columns. To filter only to a specific field, add a check for the @columnAggregate.columnDisplayName and hide accordingly.

Sample

Solution Author(s)
gauge-aggregate-footer.json Chris Kent

Version history

Version Date Comments
1.0 April 4, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

None

Keep exploring

More formats like this

Honeycomb Links

Formats links to look like honeycombs!

Explore format

Custom Charts

This templates package will allow you to quickly create 7 different types of charts, which you can organize into collections, share, and publish on SharePoint pages.

Explore format

Rating in Tiles

This sample demonstrates how to create a clickable rating experience in the view Tile mode. It allows users to rate the item/document when in the tile mode.

Explore format