The <apex:gaugeSeries> component is used within <apex:chart> to create gauge-style charts, useful for displaying progress, KPIs, or performance metrics in a visual way.
What It Does
- Renders a gauge (like a speedometer) to show a value.
- Useful for dashboards and performance monitoring.
Syntax
xmlCopyEdit<apex:chart width="400" height="300" data="{!data}">
<apex:axis type="Gauge" position="gauge"
minimum="0" maximum="100" steps="5">
<apex:gaugeSeries dataField="value"/>
</apex:axis>
</apex:chart>
Example: Displaying a Performance Gauge
apexCopyEdit<apex:page controller="GaugeChartController">
<apex:chart width="400" height="300" data="{!chartData}">
<apex:axis type="Gauge" position="gauge"
minimum="0" maximum="100" steps="10">
<apex:gaugeSeries dataField="value"/>
</apex:axis>
</apex:chart>
</apex:page>
Apex Controller:
apexCopyEditpublic class GaugeChartController {
public List<Map<String, Object>> getChartData() {
List<Map<String, Object>> data = new List<Map<String, Object>>();
data.add(new Map<String, Object>{'value' => 75});
return data;
}
}
Key Attributes
dataField: The field name in the controller data to fetch the value.minimum,maximum: Set the gauge scale.steps: Number of segments on the gauge.
Use Cases
- Employee performance indicators
- Sales targets
- Application health monitoring