3

I would like to format the "Data Bar" in SharePoint to change color based on the percentage. So anything under 25% should be green, 26-50 should be yellow and 51-100 should be light red.

I am aware of the regular conditional formatting but would like to keep the "bar" aspect of the Data Bar.

Is this possible?

enter image description here

1 Answer 1

3

You can use JSON like below to conditionally change the color of data bars:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "=(100 * @currentField) + '%'",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "role": "progressbar",
    "aria-valuenow": "@currentField",
    "aria-valuemin": "0",
    "aria-valuemax": "1"
  },
  "style": {
    "padding": "0",
    "color": "black",
    "background-color": "=if(@currentField <= 0.25, '#85b44c', if(@currentField <= 0.5, '#ffc83d', '#c86c70'))",
    "border-top": "='2px solid' + if(@currentField <= 0.25, '#498205', if(@currentField <= 0.5, '#997825', '#a4262c'))",
    "width": "=if(@currentField > 1, '100%', if(@currentField < 0, '0', (100 * @currentField) + '%'))",
    "box-sizing": "border-box"
  }
}

Output:

enter image description here

Here, I am using number column with % applied to it from column settings. So, I am using conditions like <=0.25 and <=0.5. But, you can change the colors and number conditions as per your requirements.

Documentation: Use column formatting to customize SharePoint

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.