Arc¶

An Arc is a curved visual shape drawn from part of a circle. Unlike a Horseshoe, an Arc does not represent progress by itself; it is simply a shape you can use as a border, accent, divider, or background element.

This page shows how to place an Arc, set its radius and visible angle, rotate it, change its fill/border, and optionally color it from an entity value.

Add an Arc¶

Use an Arc for a fixed curved visual element such as a border, accent, or partial circle that is not itself a Horseshoe gauge.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

layout:
  arcs:
    - xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      radius: 40  # Radius of the arc
      arc_degrees: 260  # Draw 260° of the full 360° circle
      styles:
        fill: none  # Keep the inside transparent; draw only the border
        stroke: var(--divider-color)  # Border color
        stroke-width: 2  # Border thickness

Change how much of the circle is shown¶

arc_degrees controls the visible part of the circle:

1
2
3
4
5
6

layout:
  arcs:
    - xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      radius: 40  # Radius of the arc
      arc_degrees: 180  # Draw 180° of the full 360° circle

Rotate or flip the Arc¶

Use rotate to turn the Arc around its center. flip mirrors the Arc: none leaves it unchanged, x mirrors it horizontally (left/right), y mirrors it vertically (top/bottom), and both mirrors it in both directions.

Fill the Arc or show only the border¶

Use styles to control fill, stroke, stroke width, opacity, and related SVG appearance.

Change color with an entity¶

Add entity_index and color_stops when the Arc color should follow an entity value or state.

Configuration options¶

Required applies to the specific form described by that table: Yes means you need the field for that form; No means you can leave it out. Not set means the card adds no explicit value when the option is omitted.

Related¶

• Shapes
• Horseshoe
• Color stops