percentpie

Some numbers read better as shapes. Open a sent mailing in Odoo's Email Marketing and the statistics row shows five circles, each partially filled: opened, replied, clicked, received, bounced. Each circle is one percentpie widget over one computed ratio field.

The implementation is satisfyingly small. The template renders a <figure> whose background is a CSS conic-gradient: the active color sweeps from 0 percent to the field's value, the static color fills the rest. The number itself is printed in the middle, formatted to at most two decimals with trailing zeros trimmed, plus a percent sign, and the field's label (or the string attribute) sits underneath. No SVG, no canvas, no JavaScript charting, which is why it costs nothing to render even when a kanban shows fifty of them.

It is display-only in the strictest sense: there is no editing path, no click behavior, and no options to configure. The only thing you can change from the view is the label.

percentpie is the fastest way to make a KPI legible on a form or dashboard-style kanban.

The mailing statistics row is the model to copy: five ratios a marketer needs to compare at a glance, and comparing five filled circles is faster than reading five numbers. The same works for on-time delivery rate per carrier, occupancy per room type, scrap rate per work center, margin percentage per project card, any percentage a manager scans across many records.

The design constraint is honesty about the scale. The circle maps 0 to 100 literally: a fill that looks like a quarter circle IS 25 percent. That means your compute must deliver values on the 0 to 100 scale (see the trap below), and values that can exceed 100 belong in a progressbar with an overflow style rather than a pie that clips confusingly at full.

Studio ships this widget under a friendlier name.

1. Open the form or kanban in Studio.

2. Add an Integer or Decimal field, or select an existing one, typically a computed ratio.

3. In the Properties tab, set Widget to Percentage Pie.

4. Set the Label; it becomes the caption under the circle.

Studio covers everything this widget can do, because there is nothing to configure: no options exist. What Studio cannot fix either is the scale: if the underlying field stores a fraction (0.54), the circle will render 0.54 percent. The scaling belongs in the computed field's Python, not in the view.

As Email Marketing uses it

<field name="opened_ratio" string="Opened" widget="percentpie"/>

A KPI on your own model

on_time_rate = fields.Float(compute="_compute_on_time_rate")

def _compute_on_time_rate(self):
    for rec in self:
        total = len(rec.delivery_ids)
        # scale to 0-100: the widget does NOT multiply for you
        rec.on_time_rate = total and 100.0 * len(rec.delivery_ids.filtered("is_on_time")) / total

<field name="on_time_rate" string="On time" widget="percentpie"/>

Recoloring the gauge

.o_field_percent_pie {
    --PercentPieField-color-active: #28a745;
    --PercentPieField-color-static: #e9ecef;
}

The template is worth reading because it explains every quirk in one glance:

background: conic-gradient(
    var(--PercentPieField-color-active) 0% {{value}}%,
    var(--PercentPieField-color-static) 0% 100%
)

The raw value goes straight into CSS. No clamping, no scaling. A value of 250 renders a fully filled circle (the gradient saturates), a negative value renders empty, and a fraction renders as a sliver. The printed number, however, shows the actual value, so a mis-scaled compute is immediately visible as a full-looking circle labeled 0.54%.

The printed number and the fill can disagree in precision. The fill uses the raw value; the label formats with formatFloat at up to 2 decimals, trailing zeros trimmed (54 renders as 54, not 54.00), which is also why an integer field works just as well as a float.

There is no aggregation magic. Unlike project_task_progressbar, percentpie registers nothing in the formatters registry, so list-view sums and pivot measures of the same field are formatted as plain numbers.

Odoo 20 is expected at Odoo Experience in Brussels, 24 to 26 September 2026. The notes below are read from the public development branch and are not final until release.

No behavioral changes: on master the component migrates to the new props-schema API (useProps and a shared percentPieFieldProps export), with the template, the conic-gradient and the empty options list unchanged. Only JavaScript that spreads this component's props is affected. We re-verify against the shipped release.