# Gauge

> Half-ring showing one value against a maximum: a goal, a budget, a quota.

Component · Charts · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Gauge/)

Half-ring showing one value against a maximum: a goal, a budget, a quota.

Props: `value`, `max`, `caption`, `format(v)`, `tint`, or `thresholds` ([warn, danger] switches mint → butter → blush), `size`, `stroke`, `showRange`, `label`.

- One gauge per idea; never put gauges in a row to compare things — use a BarChart.
- Use `thresholds` for limits (budgets, storage), a fixed `tint` for goals where more is better.

## Example

```tsx
import { Gauge } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-panel"
      style={{
        flexDirection: "row",
        justifyContent: "space-around",
        flexWrap: "wrap",
        gap: 24,
      }}
    >
      <Gauge
        value={60}
        max={75}
        caption="80% of monthly target"
        format={(v) => "€" + v + "k"}
        tint="mint"
      />
      <Gauge
        value={72}
        max={100}
        thresholds={[60, 85]}
        caption="Agent budget used"
        format={(v) => v + "%"}
      />
      <Gauge
        value={91}
        max={100}
        thresholds={[60, 85]}
        caption="Storage used"
        format={(v) => v + "%"}
      />
    </div>
  );
}
```

## Props

### Gauge

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | Required |
| `max?` | `number` |  |
| `caption?` | `string` |  |
| `format?` | `(v: number) => string` |  |
| `tint?` | `Tint \| "ink"` |  |
| `thresholds?` | `[number, number]` |  |
| `size?` | `number` |  |
| `stroke?` | `number` |  |
| `showRange?` | `boolean` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |