# Meter Group

> Stacked-segment progress bar. Each segment is sized proportionally to its `value` relative to the sum (or the explicit `max`); legend listed underneath.

Source: https://ngwr.dev/reference/components/meter-group  
Kind: Display

## Installation

```angular-ts
import { WrMeterGroup } from 'ngwr/meter-group';

@Component({ imports: [WrMeterGroup] })
export class MyComponent {}
```

## Disk usage

```angular-html
<wr-meter-group
  [segments]="[
    { label: 'Used', value: 60 },
    { label: 'Reserved', value: 25, color: 'var(--wr-color-warning)' }
  ]"
  [max]="100"
/>
```

## Types

Data shapes used by the inputs and outputs above.

```angular-ts
interface WrMeterSegment {
  label: string;
  value: number;
  color?: string;
}
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrMeterSegment` | One segment of the bar. | `interface` | — |
| `label`required | Label shown in the legend. | `string` | — |
| `value`required | Portion of the sum of all segments. | `number` | — |
| `color` | CSS color for the slice and legend swatch. | `string` | `palette` |

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `ariaLabel` | Accessible name — the role needs one. Falls back to `meterGroup.label`. | `string \| null` | `null` |
| `segments` | — | `readonly WrMeterSegment[]` | `[]` |
| `max` | Explicit total. When `0` (default), `max = sum(values)`. | `number` | `0` |
| `showLegend` | Show the labelled legend under the bar. | `boolean` | `true` |
| `showValues` | Show each segment's value in the legend, next to its label. | `boolean` | `true` |

## WrMeterSegment

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `label` | Legend label. | `string` | `—` |
| `value` | Slice size — proportional to total. | `number` | `—` |
| `color` | CSS color (any value). Falls through to a rotating palette of theme tokens when omitted. | `string` | `auto` |