Style Rings

Rings (v2.0.0+)

Several values in one dial: phone, tablet and watch battery, or progress on a few goals. Each entity is its own ring, nested inside the others, filled to the entity's value between its min and max. A legend beside the dial gives each ring's colour, name and value.

Good for

Two to five values on the same kind of scale, compared at a glance.

Example

type: custom:chartdeck-card
style: rings
title: Batteries
entities:
  - entity: sensor.phone_battery
    name: Phone
  - entity: sensor.tablet_battery
    name: Tablet
  - entity: sensor.watch_battery
    name: Watch

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

Sensible defaults

• Sweep: from the top (0°) round to 270°, a three-quarter dial.
• Middle: the average of the values.
• Rings get thinner as there are more of them, so the middle always has room for the number.

Options

start_angle: -120     # degrees clockwise from the top (default 0)
end_angle: 120        # default 270; after the start, at most 360 after it
center: average       # average (default), total or none
color_by: series      # series (default) or bands
rounded_ends: true    # default true

• start_angle and end_angle run from -360 to 360. The end must be after the start, and at most a whole turn after it. -120 to 120 gives a dial open at the bottom.
• A dial that doesn't sweep down to the bottom is cropped, so a half dial doesn't leave an empty band under it.
• color_by: bands colours each ring by the colour band its value falls in.
• Each ring fills between the entity's own min and max (0 to 100 by default), set in the Limits section.
• Per entity, color sets the ring colour.

In the editor: Start angle (0 is the top), End angle, In the middle, Colour and Rounded ends.

Unavailable entities

An unavailable or missing entity keeps its ring's track with no fill, and its legend row shows the state. The average and total count only the available entities.

Everything else

Tapping a ring or a legend row runs the entity's tap_action (more-info by default). Each fill grows in when the card appears and slides to its new length 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: Pie and donut · Next: Pictograph · All styles