Meter Group

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

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

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

System32
Apps88
Documents24
Free112

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`

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`

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`

Installation

Disk usage

Types

API

WrMeterSegment