Creating data bars in column formatting json SharePoint

In this article we will have a look on how to create data bars in SharePoint online using column formatting json.
If you don’t have Visual Studio Code, Please download it from https://code.visualstudio.com/download.

Although you can use any editor but I prefer this as it give intelligence.

Next, in this example, I suppose that we have a list named products having a Number field named Estimate. We will do formatting and create data bars on this field.

You can also learn basics of column formatting in below articles.

• Column formatting in SharePoint online
• Writing Column formatting JSON

Let's start by creating a json file on your computer and open it with visual studio code and paste below code.

{
 "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json"
 }

If you are working on SharePoint Server 2019 then use https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json schema instead

Please note that You can write your json directly in the column >> Column settings >> Format this column >> Advanced mode

Data bars can be easily created by applying a border on the top and a background. We only need to focus on applying proper width on the basis value in our Estimate field.

For example,

Go to your column Estimate >> click on down arrow >> Column settings >> Format this column and click on advanced mode and paste below json.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
     "debugMode": true,
     
     "style":{
         "width":"=if(@currentField>=80,'100%',(@currentField)+'%')",
         "background-color":"yellow" ,
         "padding-left":"4px",
         "border-top-style": "solid",
         "border-top-width":"3px",
         "border-top-color":"green"  
     },
     "children": [
        {
            "elmType": "span",
             "style":{
                 "padding-left":"8px",
                 "white-space":"nowrap"
             },
             "txtContent":"@currentField"
        }
     ]

}

Notice the style in div, it creates a 3px top border with green background as shown in below image. We can also use theme colors in background and border but I will write a separate article for that.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
     "debugMode": true,
     
"attributes": {
    "class":"sp-field-dataBars"
   },
     "style":{
         "width":"=if(@currentField>=80,'100%',(@currentField)+'%')",
         "padding-left":"4px"
         
     },
     "children": [
        {
            "elmType": "span",
             "style":{
                 "padding-left":"8px",
                 "white-space":"nowrap"
             },
             "txtContent":"@currentField"
        }
     ]
}

Mukesh Tiwari
Always ready to learn new technologies, A problem solver, exhibit to do attitude. Having around 10+ years of experience of development and management skills. I believe don't just set random goals but right goals suited for you.