---
title: '{% widthratio %}'
description: used to create bar charts and the like.
date: '2026-08-02'
categories:
  - Template Tag
  - Coding
canonical: https://www.djangotemplatetagsandfilters.com/tags/widthratio/
doc_link: https://docs.djangoproject.com/en/6.0/ref/templates/builtins/#widthratio
---

# {% widthratio %}

used to create bar charts and the like.

## Documentation

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

```django
{% widthratio this_value max_value max_width %}
```

The value is calculated using this formula:

```django
(this_value/max_value) * max_width
```

### Template

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

```django
<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: