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.

Energy dashboard (v2.2.0+)

type: custom:chartdeck-card
style: pie
title: Where today's energy came from
source: energy
period:
  calendar: day

source: energy makes the slices from Home Assistant's Energy dashboard, with no entities to list. Each slice is that flow's total over the card's period, read from long-term statistics.

• By default the slices are where the energy came from: grid import, solar and battery out.
• energy_flows picks others, from grid_import, grid_export, solar, battery_out, battery_in, gas, water and devices (each device in the Energy dashboard as a slice of its own). Mixing gas or water with electricity gives slices in different units, and the middle then shows a total with no unit.
• period is any span the line chart takes: today, the last 24 hours, this month. There are no previous and next buttons, and the chart doesn't name the span, so the title should. With no period set the editor fills in today.
• sort orders the slices by their total. Any entities you list are added after the energy slices, totalled over the same period.

In the editor: Readings from (Current values or Energy dashboard) at the top of the Chart section, then the period and Energy flows. See source: energy.

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