Blazor Circular Gauge Example - Default Functionalities

This sample demonstrates the fundamental rendering of the Circular Gauge component using a single axis and a pointer. It provides a minimal, focused example that illustrates how an axis defines the gauge scale and how a pointer conveys a numeric value on the circular dial. Use this example to learn basic axis and pointer configuration before exploring advanced features.

Core components:

• Use CircularGaugeAxes to define the scale, tick intervals, label format, start/end angles, and optional ranges.
• Use CircularGaugePointers to display values with needle, marker, or range‑bar styles bound to application data.
• Numerical scale visualization on a circular layout supports annotations, formatted labels, and units to improve readability.

Implementation notes: bind axis limits and pointer values to your view model so the gauge updates automatically as data changes. Configure minimum/maximum, major and minor ticks, and label formats to match domain units. Style pointer anchors, pivot caps, and range fills for sufficient contrast and consider animation settings for smooth transitions. Use annotations for explicit readouts and include ARIA attributes and descriptive labels to support assistive technologies.

Best practices: test the gauge across viewport sizes, high‑DPI displays, and localization settings to ensure labels and ticks remain legible. Limit simultaneous pointers per axis to avoid clutter, and throttle live updates when rendering frequent value changes to preserve performance.

More information: Circular Gauge - Getting Started.