# Components: Bar & Rectangle

> Proportional bars and plates.

Glider documentation · Building Graphics · Web page: https://cgglider.com/docs/components/shapes/

Sections of this page: [Overview](https://cgglider.com/docs/components.md) · [Text](https://cgglider.com/docs/components/text.md) · [Bar & Rectangle](https://cgglider.com/docs/components/shapes.md) · [Shaping plates](https://cgglider.com/docs/components/shape-editor.md) · [Chart](https://cgglider.com/docs/components/chart.md) · [Button](https://cgglider.com/docs/components/button.md)

A rectangle is pure appearance: fill, radius, border, shadow. A bar is a rectangle that fills proportionally — its content is a number, or JSON of the form [{label, value, color?}].

| Bar setting | Meaning |
| --- | --- |
| Axis | Horizontal or vertical. |
| Origin | Which end the fill grows from — left/right, or bottom/top. |
| Min / Max | The value range. |
| Auto max | Track the largest datum instead of a fixed max. |
| Thickness | Bar thickness in px; 0 stretches to the node. |
| Radius, Gap, Pad | Corner radius, spacing between bars, inner padding. |
| Track | The colour of the unfilled remainder. |

A numeric string is accepted as a number, so a bar bound to a feed field that arrives as "42" still fills correctly.