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.

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