Style Ring

Ring

A full circle with a hollow centre showing the value and unit, the name below and the icon above the value. Several fit in a row. The arc is drawn in the colour of the current band, with a small marker for the target.

Good for

CPU, memory, disk.

Example

type: custom:chartdeck-card
style: ring
title: Server
entities:
  - entity: sensor.cpu_usage
    name: CPU
  - entity: sensor.memory_usage
    name: Memory
  - entity: sensor.disk_usage
    name: Disk
severity:
  - from: 0
    color: green
  - from: 60
    color: amber
  - from: 85
    color: red

To use this style, set style: ring (or pick Ring in the editor's Style section).

Options that matter here

• columns sets how many rings sit in a row. By default as many as fit the card's width; columns fixes the number per row.
• decimals and unit change what is printed in the centre; the value text shrinks to fit.
• show.icon: false removes the icon above the value.
• With a range that crosses zero, the ring is drawn from the zero point.

Angles, centre text and scale numbers (v2.0.0+)

Ring, arc and needle gauges share three extras. They are the card's options, so every gauge on a card is drawn the same way, including entities added by an include rule. With none of them set the gauges draw exactly as before.

start_angle: -120        # degrees clockwise from the top: -90 is the left, 90 the right
end_angle: 120
center: band             # value (default), band, name, text or none
center_text: Hot water   # for center: text
tick_labels: true        # needle only: numbers along the scale

• start_angle and end_angle set where the gauge's arc starts and ends. Leave either out and the style's usual end is used (ring -180 and 180, arc -135 and 135, needle -90 and 90). The end must come after the start, and the sweep can be at most 360 degrees. The drawing is cropped to the arc, so a half-circle leaves no empty space below it.
• center is what sits in the middle (on the needle, under the hub): the value, the current colour band's label drawn in the band's colour (the value when the band has no label), the entity's name (the name under the gauge is then left out), your own center_text, or nothing.
• tick_labels: true (needle only) writes round numbers along the scale from min to max, the ends always shown, outside the arc and past the target marker.
• These options are read only by the ring, arc and needle styles. Other styles that have a center option (pie, rings) keep their own meaning for it.
• Unavailable and missing entities keep their status text whatever the centre shows.

In the editor they sit in the Style section under the style picker, while a gauge style is chosen: Start angle, End angle, In the middle, Text and, for the needle, Numbers on the scale.

Recent range behind the gauge (v2.2.0+)

Ring, arc and needle gauges can show where the value has been lately: a faint band from the lowest to the highest reading of the last 24 hours (or 7 days), with a stronger tick at the average. A reading that sits at the top of its usual range, or one that has barely moved, shows at a glance.

ghost: 24h   # off (default), 24h or 7d

• 24h reads the last 24 hours of history for each entity. 7d reads hourly long-term statistics, and falls back to history for a sensor without statistics (one with no state_class). An attribute always reads history.
• The average is weighted by how long each value held, so a brief spike doesn't pull it.
• The band sits inside the scale on the needle, and between the centre and the track on the ring and arc. A reading that hasn't moved still gets a thin sliver.
• Hovering the band shows the numbers: "Last 24 hours: 22 % to 68 %, mean 46 %".
• Every gauge on the page that shows the same entity and span shares one load. It is read again on the next redraw once it is 5 minutes old (24 hours) or an hour old (7 days).
• Like the angles, ghost is the card's option: every gauge on the card gets it.

In the editor: Recent range behind the gauge in the Style section under the style picker, while ring, arc or needle is chosen.

Layout: tiles, as many per row as fit the card's width. Every option is described on the Options page.

Previous: Tank · Next: Needle · All styles