Pointer Types and Customizations in Blazor Circular Gauge

A sample Blazor WebAssembly application demonstrating the various pointer types available in the Blazor Circular Gauge component, including needle pointers, range bars, and marker pointers with full customization support.

Overview

This project showcases the capabilities of Blazor Circular Gauge component, with a focus on pointer customization. The sample includes a working speedometer gauge that demonstrates:

• Multiple pointer types (needle, range bar, marker)
• Pointer customization (color, radius, width, position)
• Interactive features (pointer dragging enabled)
• Visual elements (caps, needle tails, borders)

Perfect for developers looking to integrate interactive gauges into their Blazor applications.

Features

• Needle Pointers - Traditional speedometer-style needles with caps and tails
• Range Bar Pointers - Filled bars for progress and range indicators
• Marker Pointers - Flexible marker-based indicators with customizable shapes
• Color Cusomization - Full color customization for pointers, caps, and borders
• Styles - Rounded corners and border styling for range bars
• Pointer Drag - Pointer dragging enabled for user interaction

Prerequisites

• .NET SDK 10.0 or later
• Visual Studio 2022 or later
• Visual Studio Code

Getting Started

Clone the Repository

git clone https://github.com/SyncfusionExamples/pointer-types-and-their-customizations-in-blazor-circular-gauge-component.git
cd pointer-types-and-their-customizations-in-blazor-circular-gauge-component

Run with Visual Studio

1. Open the solution file using Visual Studio 2022 or later.
2. Restore the NuGet packages by rebuilding the solution.
3. Build the project to ensure there are no compilation errors.
4. Run the project.

Run with .NET CLI

# Restore dependencies
dotnet restore

# Run the project
dotnet run

References

Documentation: https://blazor.syncfusion.com/documentation/circular-gauge/pointers

Online example: https://blazor.syncfusion.com/demos/circular-gauge/pointer-types