'extended the bars to the bottom in SharePoint Online JSON format

I want to extend the bar, in blue or red up to the bottom of the row via JSON.

How can I achieve that?

Here is my code:

{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
  "elmType": "span",
  "txtContent": "=(@currentField) + '%'",
  "style": {
    "padding-left": "8px",
    "white-space": "nowrap"
  }
  }
],
"style": {
"width": "=if(@currentField == 100, '100%', toString(@currentField * 100/ 100) +'%')",
"background-color": "=if(@currentField <= 20 ,'#F08080',if(@currentField <= 60 ,' 
  #FFFACD',if(@currentField <= 80 ,'#228B22','#4169e1')))",
"border-top": "='2px solid' + if(@currentField <= 20, '#800000', if(@currentField <= 60, 
 '#997825',if(@currentField <= 80,  '#006400','#006400')))",
"color": "black",
"font-weight": "bold"
 }
}

This is where my gap in the bar are

cssjsonformattingsharepoint-online


Solution 1:[1]

Adding "padding":"0" to "style" element should do the trick

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#format-a-number-column-as-a-data-bar-advanced

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dragan Panjkov

Related Questions