widthratio Tag

Coding

Argument(s): this_value max_value max_width

Documentation

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

Template

<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>

Result

<div id="barchart">
  <div id="red" style="width:75px"></div>
  <div id="blue" style="width:30px"></div>
  <div id="green" style="width:135px"></div>
</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 April 14, 2020, 7:21 p.m. EST