MeterGroup visualizes data spread as a segmented progress bar, with multiple segments in a single bar, horizontal or vertical orientation and configurable labels with icons or colors.
Horizontal and vertical layouts, labels at the start and vertical labels.
<div class="card">
<h5>Basic Usage</h5>
<p>Horizontal and vertical layouts, labels at the start and vertical labels.</p>
<h6>Basic</h6>
<pe:meterGroup value="#{meterGroupController.meters}" />
<h6>Vertical</h6>
<pe:meterGroup value="#{meterGroupController.meters}" orientation="vertical" style="height: 300px" />
<h6>Labels at Start</h6>
<pe:meterGroup value="#{meterGroupController.meters}" labelPosition="start" />
<h6>Vertical Labels</h6>
<pe:meterGroup value="#{meterGroupController.meters}" labelOrientation="vertical" />
</div>
package org.primefaces.extensions.showcase.controller;
import java.io.Serial;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import jakarta.annotation.PostConstruct;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.model.metergroup.MeterGroupItem;
@Named
@ViewScoped
public class MeterGroupController implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
private List<MeterGroupItem> meters;
@PostConstruct
public void init() {
meters = new ArrayList<>();
meters.add(new MeterGroupItem("Apps", 16, "#34d399", "pi pi-cog"));
meters.add(new MeterGroupItem("Messages", 8, "#fbbf24", "pi pi-inbox"));
meters.add(new MeterGroupItem("Media", 24, "#60a5fa", "pi pi-image"));
meters.add(new MeterGroupItem("System", 10, "#c084fc", "pi pi-desktop"));
}
public List<MeterGroupItem> getMeters() {
return meters;
}
}