Style Pie

Pie and donut (v2.0.0+)

How a total splits into parts: where today's energy came from, disk space by folder, power use by room. The card's entities become slices of one circle, sized by their current values, with a legend beside it giving each entity's colour, name, value and share. It draws from the entities' current values, so no history is involved.

Good for

A handful of parts of one total, where the shares matter more than the exact numbers.

Example

type: custom:chartdeck-card
style: pie
title: Energy today
center_label: kWh today
entities:
  - entity: sensor.solar_energy_today
    name: Solar
  - entity: sensor.grid_energy_today
    name: Grid
  - entity: sensor.battery_energy_today
    name: Battery

To use this style, set style: pie (or pick Pie / donut under Parts of a total in the editor's Style section). The chart options are in the editor's Chart section.

Sensible defaults

• Shape: a donut, with the total of its slices in the middle.
• Shares are whole percentages that always add up to 100.
• Colours: one per entity, in the same order as the history charts, unless an entity has its own color.

Options

shape: donut           # donut (default) or pie
center: total          # total (default) or none; donut only
center_label: kWh today  # the line under the total; default the shared unit
color_by: series       # series (default), bands or shades
shade_color: green     # for shades: a palette name or CSS colour; default primary
gap: 2                 # space between slices, 0 to 10 (default 2)
rounded: false         # round ends on donut slices
gradient: false        # each slice fades lighter towards the middle
show_percent: true     # the share column in the legend

• The middle of a donut shows the total of its slices. The line under it is center_label, or the unit when every entity shares one. center: none leaves the middle empty. A pie has no middle, so center and center_label do nothing there.
• color_by: bands colours each slice by the colour band its value falls in. color_by: shades gives every slice a shade of shade_color, darkest first.
• gap on a pie draws lines in the card's background colour between slices, so the gap is the same width all the way to the centre. On a donut each slice is shortened instead.
• rounded: true gives donut slices round ends. It has no effect on a pie.
• show_percent: false hides the share column; the legend still shows each value.
• Per entity, color sets the slice colour.

In the editor: Shape, Colour, In the middle, Line under the total, Space between slices, Shade colour, Rounded ends, Gradient fills and Show each share as a percentage.

Missing, zero and negative values

Only positive numbers become slices. Unavailable, missing, zero and negative entities stay in the legend with a hollow swatch and no share, so nothing silently disappears. With nothing to draw, the card shows an empty ring.

Tapping

Tapping a slice or a legend row runs the entity's tap_action (more-info by default). Drilling into a slice's own parts isn't built yet; a navigate tap action to a view of the parts does the job meanwhile.

Everything else

Slices grow in when the card appears and glide to their new size when a value changes. Animation is off when animate: false is set or the browser asks for reduced motion.

Layout: one chart for the whole card. Every shared option is described on the Options page.

Previous: Combined · Next: Rings · All styles