Back to view formats
View formattingSharePoint Online

Column Graph

This sample shows how to format a list to show the data as a column graph.

Column Graph 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",
  "hideSelection": "true",
  "hideColumnHeader": "true",
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "height": "800px",
      "align-items": "flex-end",
      "box-sizing": "border-box",
      "border-bottom": "3px solid",
      "border-left": "=if(@rowIndex == 0, '3px solid' , '0px')"
    },
    "attributes": {
      "class": "ms-fontColor-themeDark"
    },
    "children": [
      {
        "elmType": "span",
        "txtContent": "Views",
        "style": {
          "display": "=if(@rowIndex == 0, 'block','none')",
          "position": "absolute",
          "left": "-24px",
          "top": "656px",
          "width": "18px",
          "text-align": "center",
          "font-size": "24px",
          "line-height": "22px"
        }
      },
      {
        "elmType": "span",
        "style": {
          "display": "=if(@rowIndex == 0, 'block','none')",
          "position": "absolute",
          "left": "-27px",
          "top": "770px",
          "width": "10px",
          "font-size": "24px"
        },
        "attributes": {
          "iconName": "ChevronUp"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "left": "=3 + @rowIndex*76 + 'px'",
          "top": "=45 + ((800-45) * .3) + 'px'",
          "border-bottom": "3px dashed",
          "width": "73px"
        }
      },
      {
        "elmType": "span",
        "style": {
          "display": "=if(@rowIndex == 0, 'block','none')",
          "position": "absolute",
          "left": "4px",
          "top": "802px",
          "font-size": "24px"
        },
        "attributes": {
          "iconName": "ChevronRight"
        }
      },
      {
        "elmType": "span",
        "txtContent": "Blogs",
        "style": {
          "display": "=if(@rowIndex == 0, 'block','none')",
          "position": "absolute",
          "left": "28px",
          "top": "800px",
          "font-size": "24px",
          "line-height": "24px"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "=if([$Views] >= 700, 'ms-bgColor-themeDarker ms-fontColor-white ms-bgColor-themePrimary--hover ms-fontColor-white--hover sp-field-dataBars ms-font-m', 'ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover sp-field-dataBars ms-font-m')",
          "title": "=[$Title] + ' has ' + [$Views] + ' views' + if([$Views] >= 700, ' and is trending.','.')"
        },
        "style": {
          "width": "56px",
          "height": "=if([$Views] >= 1000, (800 - 45) + 'px', ([$Views] / 1000) * (800 - 45) + 'px')",
          "margin": "0 10px",
          "box-shadow": "2px 0px 4px 0px darkgrey",
          "box-sizing": "border-box",
          "text-align": "center",
          "z-index": "1"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "margin-top": "-45px",
              "margin-bottom": "10px",
              "display": "=if([$MostRead], 'block','none')",
              "color": "#FFD700",
              "font-size": "42px"
            },
            "attributes": {
              "iconName": "CrownSolid"
            }
          },
          {
            "elmType": "span",
            "txtContent": "=if([$Views] > 1000, '1000+', [$Views])"
          },
          {
            "elmType": "div",
            "style": {
              "margin-top": "5px",
              "display": "=if([$Views] >= 700, 'block','none')"
            },
            "attributes": {
              "iconName": "Trending12"
            }
          }
        ]
      }
    ]
  }
}
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /hideSelection must be boolean

From the contributor

How to use this sample

Summary

This sample shows how to format a list to show the data as a column graph. In this instance we are showing number of views per blog.

screenshot of the sample

The sample features the following:

  • Conditionally showing a crown icon if the item is marked as MostRead
  • Conditionally showing elements (chart labels) based on @rowIndex
  • Conditionally showing a trending icon if the item has more than 700 views
  • Conditionally changing the colour of the bar if the item has more than 700 views
  • Use of theme color classes to ensure the format displays as intended regardless of theme (light, dark, custom, etc.)

Item Hover view

Column Graph with Title Screenshot

View requirements

Type Internal Name Required
Single line of text Title Yes
Number Views
Yes/No MostRead

Setup

The sample needs the following setup:

  • Only one item needs to have MostRead as yes

The idea is that this data gets populated via some code so that it can represented as a graph.

In the sample, the height of the parent div is set to 800px and the child div calculates heights. The heights are calcuated considering 1000 as the max number of views. If this number needs changed, please update the formulas in lines 89 and 112 accordingly.

Sample

Solution Author(s)
column-graph.json Anoop Tatti

Version history

Version Date Comments
1.0 August 15, 2019 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.