Blazor Circular Gauge Example - Multiple Ranges
This sample displays temperature variations using multiple ranges in a Circular Gauge. The example illustrates how to represent discrete temperature zones, highlight the current measurement with a needle pointer, and present a textual annotation for precise readout. The sample configures multiple colored segments to encode temperature zones and leverages annotations for numeric readouts and units; pointer animation and pivot styling demonstrate how visual emphasis can be tuned for clarity.
Multi-range implementation:
- Represent multiple temperature zones as distinct, color-coded ranges to communicate safe, warning, or critical bands.
- Define ranges via the CircularGaugeRanges collection to control start/end values, color, and styling.
- Use a needle pointer to indicate the current temperature and an annotation to display the exact value alongside the visual gauge.
- Combine range colors, pointer styling, and annotation formatting to improve at-a-glance interpretation and accessibility.
Implementation notes: bind range and pointer values to your data model so updates reflect live measurements; for live feeds, throttle update frequency and animate pointer transitions to preserve smooth rendering. Choose high‑contrast, colorblind‑safe palettes and provide a legend or concise labels when color meaning is not immediately apparent. Size annotations and pointer anchors to avoid overlap with tick labels; format annotation text to include units and required precision. When using images or color codes, provide text alternatives and ARIA attributes where appropriate. Test the gauge with representative datasets and adjust range boundaries, pointer anchor, and annotation placement to avoid overlap and maintain legibility across device sizes and high‑DPI displays.
For detailed API reference and examples, see the documentation: Multiple Ranges.