Component

Meter Group

Stacked meter bars for comparing multiple values against a shared total

import { NeuMeterGroupComponent } from '@neural-ui/core/meter-group';
import type { NeuMeterItem } from '@neural-ui/core/meter-group';

Disk usage

Ticket distribution

No legend, rounded

No rounded corners, large height

import { NeuMeterGroupComponent } from '@neural-ui/core/meter-group';
import { NeuMeterItem } from '@neural-ui/core/meter-group';

@Component({
  imports: [NeuMeterGroupComponent],
  template: `
    <neu-meter-group [items]="diskUsage" [total]="500" />
  `
})
export class MyComponent {
  diskUsage: NeuMeterItem[] = [
    { label: 'Sistema',     value: 42,  color: 'var(--neu-primary)' },
    { label: 'Documentos',  value: 115, color: '#10b981' },
    { label: 'Multimedia',  value: 200, color: '#f59e0b' },
    { label: 'Libre',       value: 143, color: 'var(--neu-surface-3)' },
  ];
}