title: extended the bars to the bottom in SharePoint Online JSON format
body: <p>I want to extend the bar, in blue or red up to the bottom of the row via JSON.</p>
  <p>How can I achieve that?</p>
  <p>Here is my code:</p>
  <pre><code>{
  &quot;$schema&quot;: &quot;https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json&quot;,
  &quot;elmType&quot;: &quot;div&quot;,
  &quot;children&quot;: [
  {
    &quot;elmType&quot;: &quot;span&quot;,
    &quot;txtContent&quot;: &quot;=(@currentField) + '%'&quot;,
    &quot;style&quot;: {
      &quot;padding-left&quot;: &quot;8px&quot;,
      &quot;white-space&quot;: &quot;nowrap&quot;
    }
    }
  ],
  &quot;style&quot;: {
  &quot;width&quot;: &quot;=if(@currentField == 100, '100%', toString(@currentField * 100/ 100) +'%')&quot;,
  &quot;background-color&quot;: &quot;=if(@currentField &lt;= 20 ,'#F08080',if(@currentField &lt;= 60 ,' 
    #FFFACD',if(@currentField &lt;= 80 ,'#228B22','#4169e1')))&quot;,
  &quot;border-top&quot;: &quot;='2px solid' + if(@currentField &lt;= 20, '#800000', if(@currentField &lt;= 60, 
   '#997825',if(@currentField &lt;= 80,  '#006400','#006400')))&quot;,
  &quot;color&quot;: &quot;black&quot;,
  &quot;font-weight&quot;: &quot;bold&quot;
   }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eDw78.png" rel="nofollow noreferrer">This is where my gap in the bar are</a></p>