# Meter Group

> One bar split into labelled parts, with a legend.

Source: https://ngwr.dev/charts/meter-group  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrMeterGroup } from 'ngwr/charts/meter-group';

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

```scss
@use 'ngwr/charts/meter-group';
```

## Disk usage

Each segment takes its share of the sum, or of `max` when set.

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

## Tooltip

`[tooltip]="false"` falls back to the browser `title`.

```angular-html
<wr-meter-group [segments]="diskUsage" [tooltip]="false" />
```

## Types

```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` | The parts of the bar, in order. Values are summed and each segment is drawn as its share of that total, so they need not add up to anything in particular. | `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` |
| `tooltip` | Show a tooltip with the segment's label and value on hover. It replaces the band's `title`, which is written only while this is off — or the browser would open a second copy a moment later. | `boolean` | `true` |
| `valueFormat` | Writes every value in the legend and the tooltip, and the total the bar announces as `aria-valuetext`. `null` uses `Intl.NumberFormat` in `LOCALE_ID`. `aria-valuenow` stays a number. | `((value: number) => string) \| null` | `null` |

## Dependencies

| Built on | [Popover](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Donut Chart](https://ngwr.dev/charts/donut-chart) — Parts of a whole as a ring or a pie.
- [Progress](https://ngwr.dev/reference/components/progress) — A bar that shows how far a task has got.
- [Bar Chart](https://ngwr.dev/charts/bar-chart) — Vertical bars for one series of values.
- [Colors](https://ngwr.dev/guides/tokens/colors) — The --wr-color-* tokens, and which one to use for fills, text and borders.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.