Syncfusion.AspNetCore.CircularGauge
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.
Using this package with an AI coding agent
Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
Platform reference: https://ai.syncfusion.com/aspnet-core/llms.txt
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 the CircularGauge package, which provides the scripts referenced below:
dotnet add package Syncfusion.AspNetCore.CircularGauge
2. Register tag helpers
Add the following to ~/Pages/_ViewImports.cshtml or ~/Views/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.AspNetCore.Base
@addTagHelper *, Syncfusion.AspNetCore.CircularGauge
3. Add script references
In your layout file (~/Pages/Shared/_Layout.cshtml):
<head>
<!-- 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 1800+ 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.