SharePoint List Formatting
Back to column formats
Column formattingSharePoint 2019SharePoint Online

Data Bar

These formats apply background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. These styles are applied using the special column formatting class sp-field-dataBars. The bars are sized differently for different values based on the way the width attribute of the main div is set.

Get this format View on GitHub

Shared by Vesa Juvonen, Chris Kent
Updated May 17, 2019

Data Bar formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

4 definitions

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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')",
    "box-sizing": "border-box"
  }
}
View sourceLink to this definitionnumber-data-bar.json

From the contributor

How to use this sample

Summary

These formats apply background-color and border-top styles to create a data bar visualization of @currentField, which is a number field. These styles are applied using the special column formatting class sp-field-dataBars. The bars are sized differently for different values based on the way the width attribute of the main div is set.

Simple Data Bar (number-data-bar.json)

In this format, the data bar width is set to 100% when the value is greater than or equal to 20, and (@currentField * 5)% when the value is less than 20. This achieves a width of 5% for the data bar for values of 1, 10% for values of 2, and so on. To fit this example to your number column, you can adjust the boundary condition (20) to match the maximum anticipated value inside the field, and the multiplier (5) to specify how much the bar should grow depending on the value inside the field.

screenshot of the sample

Percentage Data Bar (percent-data-bar.json)

An additional format is included to illustrate how to apply the same visualization to a number column set to display as a percent. The data bar width is set to the @currentField's value directly and the display text adds the % sign as expected.

screenshot of the Percentage Data Bar

View requirements

  • This format can be applied to a Number column

Sample

Solution Author(s)
number-data-bar.json SharePoint Team
percent-data-bar.json Chris Kent

Version history

Version Date Comments
1.0 November 2, 2017 Initial release
1.1 May 27, 2018 Fixed issue with 0 values and added percentage format
1.2 August 18, 2018 Fixed issue with low value text wrapping and converted to excel-style expressions
1.3 May 17, 2019 Added box-sizing:border-box to root style

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

This sample is also covered in the main documentation around Column Formatting.

A similar wizard is also included in the Column Formatter webpart that allows full customization.

Additional versions using Abstract Tree Syntax (AST) are also provided for environments where the Excel-style expressions are not supported.