widthratio Tag


Argument(s): this_value max_value max_width


Used to create bar charts and the like. The syntax is:

{% widthratio this_value max_value max_width %}

The value is calculated using this formula:

(this_value/max_value) * max_width


<div id="barchart">
  <div id="red" style="width:{% widthratio 25 100 300 %}px"></div>
  <div id="blue" style="width:{% widthratio 10 100 300 %}px"></div>
  <div id="green" style="width:{% widthratio 45 100 300 %}px"></div>


<div id="barchart">
  <div id="red" style="width:75px"></div>
  <div id="blue" style="width:30px"></div>
  <div id="green" style="width:135px"></div>

With some CSS applied, the resulting output might look like this:

Did we get something wrong? Is there a use case for the widthratio tag that we should add? Please let us know.

Send Feedback

Official Documentation
This page last updated on Oct. 30, 2022, 1:22 p.m. EST