Syncfusion® ASP.NET Core Circular Gauge control is used to display numerical values on a circular scale with a rich set of customization options. It supports features like multiple axes, multiple pointers (needle, range bar, marker), gradient colors, ranges, ticks, labels, tooltips, animation, and annotations. It is widely used in dashboards for representing speedometers, tachometers, clocks, radial sliders, and other gauge-style KPI metrics in ASP.NET Core applications.
Install
| Product | Versions |
|---|---|
| .NET |
README
Syncfusion® ASP.NET Core Circular Gauge Component
The Syncfusion® ASP.NET Core Circular Gauge component is used to display data in a circular scale. It can be used to represent speed, temperature, humidity, and other metrics in an intuitive gauge format.
Key Features
- Multiple Axes: Support for multiple axes with independent ranges
- Pointer Types: Needle, marker, and range bar pointer types
- Range Coloring: Customizable ranges with color gradients
- Annotations: Add custom content and labels inside the gauge
- Interactions: Drag-and-drop pointer support with tooltips
- Animation: Smooth animations and transitions
- Export Options: Export to PNG, JPEG, SVG, and PDF formats
- Responsive Design: Mobile-friendly layout and touch support
- Accessibility: Full WCAG compliance and ARIA support
Common Setup
All Syncfusion ASP.NET Core controls share the same foundational setup steps:
1. Install NuGet Package
Install-Package Syncfusion.AspNetCore.CircularGauge
2. Register Tag Helper
Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.AspNetCore.CircularGauge
3. Add Stylesheet & Script References
In your layout file (~/Pages/Shared/_Layout.cshtml):
<head>
<!-- Themes package -->
<link rel="stylesheet" href="_content/Syncfusion.AspNetCore.Themes/styles/fluent2.css" />
<!-- Script reference -->
<script src="_content/Syncfusion.AspNetCore.CircularGauge/scripts/sf-circular-gauge.min.js"></script>
</head>
4. Register Script Manager
In your layout file (~/Pages/Shared/_Layout.cshtml), At the end of your <body> tag:
<ejs-scripts></ejs-scripts>
Quick Start
<ejs-circulargauge id="container" title="Speed">
<e-circulargauge-axes>
<e-circulargauge-axis minimum="0" maximum="120">
<e-axis-pointers>
<e-axis-pointer value="60" type="Needle"></e-axis-pointer>
</e-axis-pointers>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge>
Run the Application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA
About Syncfusion®
Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:
Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue
Desktop: WinForms | WPF | WinUI
Learn more at www.syncfusion.com
[email protected] | Toll Free: 1-888-9-DOTNET
Changes from Previous Version
Adoption Assessment
A verified publisher signal is available. Assess fit from the package's supported frameworks, license and dependency graph rather than popularity alone.
Related Guides & Workflows
Learn how to evaluate, integrate, or audit this package in your .NET project.