Blazor Circular Gauge Example - Image Pointer

This sample visualizes shot put distances using image-based pointers in the Circular Gauge for sports performance tracking. The example demonstrates how to use image markers and custom marker shapes to represent athlete throws, improving immediate legibility when comparing distances across competitors.

Pointer customization options:

• Use the Type property to select the image pointer type and pointer behavior.
• Configure marker shape and alignment via the MarkerShape property to match design requirements.
• Specify the marker image using the ImageUrl property to display athlete or event icons.

Implementation notes: bind pointer values to shot distances in your data model so the gauge updates automatically as results change. Size images to preserve readability at typical canvas sizes and align marker anchors to the gauge radius to prevent visual overlap with tick labels. Provide descriptive alt text or explicit ARIA attributes for image pointers to preserve accessibility; when necessary include hidden text alternatives for screen readers. Tune pointer sizing, spacing, and animation to avoid occluding labels or tooltips and to minimize layout shifts. Test rendering across device pixel ratios, zoom levels, and browsers. For dynamic feeds, throttle visual updates to maintain smooth animation and acceptable performance.

Best practices: prefer vector or appropriately sized PNG/SVG assets to avoid blurring on high‑DPI displays; specify marker anchor offsets to align images with numeric scales; limit the number of simultaneous image pointers per axis to reduce clutter; document the data binding and image licensing requirements when distributing application assets.

See the pointer documentation for examples and API details: Image marker pointer.