Meter Group

import { Component } from '@angular/core';
import { WrMeterGroup } from 'ngwr/charts/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`	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`

Built on	Popover

Installation

Disk usage

Tooltip

Types

API

Dependencies

See also