We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Overview

The ASP.NET CORE Circular Gauge chart control is ideal for visualizing numeric values over a circular scale. A circular gauge, also known as a radial gauge, can be used to create a speedometer, meter gauge, multi-axes clock, modern activity gauge, direction compass, and more. All circular gauge elements are rendered using scalable vector graphics (SVG).


Axes customization

The gauge axes are circular scales where a set of values can be plotted based on any business logic. You can also easily customize the appearance of the axes.

Label customization

Customize the look and feel of the default labels in gauge by changing the font style, size, and color. Prefix or suffix text can also be added to the labels.

Ticks customization

Define the desired style for major and minor ticks in the gauge by changing their height, width, and color.

Offset

To enhance readability, change the position of the default axes in the gauge by setting the offset value for labels, ticks, and axis lines.

ASP.NET CORE circular gauge chart rendered with customized axis line

Axis line

Add a border to the gauge by using axis lines. The appearance of the default axis in the radial gauge can also be customized.

ASP.NET CORE circular gauge chart rendered with multiple axes

Multiple axes

The ASP.NET CORE circular gauge chart allows you to add multiple axes to a gauge to design it like a clock, speedometer, meter gauge, etc.

ASP.NET CORE circular gauge chart rendered with counterclockwise axes

Direction

Render the axes in the radial gauge either in a clockwise direction or in a counterclockwise direction


Range customization

A range in an ASP.NET CORE gauge chart is a visual element that helps to quickly visualize where a value falls on the axis.

ASP.NET CORE circular gauge chart rendered with a range position

Range position

Change the position of a range or move it to any place inside the gauge.

ASP.NET CORE circular gauge chart rendered with modified range width

Range width

The range width varies based on the values to enhance usage and readability.

ASP.NET CORE circular gauge chart rendered with multiple ranges

Multiple ranges

You can add multiple ranges inside the axes to show color variations.


Pointer types

Indicate values on an axis using pointers. The ASP.NET CORE circular gauge chart control supports three types of pointers: needle, marker, and bar.

Needle pointer

Point out the current value in the radial gauge by using a highly customizable needle-type element.

ASP.NET CORE circular gauge chart rendered with an arrow pointer

Pointer type

Change the needle pointer type to a rectangle or arrow to point out or highlight values.

ASP.NET CORE circular gauge chart rendered with a pointer cap

Pointer cap

The pointer cap is a rounded ball at the end of the arrow pointer that can also be customized to enhance the pointer’s appearance.

ASP.NET CORE circular gauge chart rendered with a pointer tail

Tail

Add extra styling to the pointer cap by adding a tail.

ASP.NET CORE circular gauge chart rendered with multiple needle pointers

Multiple needle pointers

You can add more than one needle pointer to the gauge axes as a result to indicate multiple values.

Marker pointer

Point out the current value by using the following different types of marker pointers.

ASP.NET CORE circular gauge chart rendered with marker pointer

Pointer type

Change the marker pointer type to built-in shapes such as a triangle, inverted triangle, square, or circle to highlight values.

ASP.NET CORE circular gauge chart rendered with marker pointer in modified position

Marker pointer position

You can change or move the marker pointers to any place inside the gauge.

Range bar pointer

Use bar pointer to point to the current value from the start value of the axes.

ASP.NET CORE circular gauge chart rendered with bar pointer

Pointer position

You can change or move the bar pointers to any place inside the gauge graphs.

ASP.NET CORE circular gauge chart rendered with multiple bar pointer

Multiple pointers

You can add more than one bar pointer to the axes to indicate multiple values.


Pointer animation

The ASP.NET CORE gauge chart control provides a visually appealing way to view its pointers with animated transitions for a certain duration. Experience smooth pointer transitions by moving the pointer from one place to another.

ASP.NET CORE circular gauge chart rendered with animation for pointers


Pointer interaction

The interactive ASP.NET CORE circular gauge control provides an option to drag the pointer from one place to another. This allows you to control the pointer with swipe gestures and change the value at runtime.

Enabled pointer dragging in ASP.NET CORE circular gauge chart


Arc gauges

The ranges and range bar pointer corners in the radial gauge are rounded to form arc gauges.


Tooltip

The interactive ASP.NET CORE circular gauge chart control provides options to display details about a pointer value through a tooltip when hovering the mouse over the pointer.

Display a tooltip on moving the mouse over the pointer in a ASP.NET CORE circular gauge chart


Half and quarter gauges

Form half or quarter circular gauges by modifying the start and end angles of a gauge. This allows the gauge to render in a very small area.


Annotations

Display any HTML element as an annotation at a specific point of interest in the ASP.NET CORE circular gauge chart. You can also add multiple annotations in a gauge.


Appearance

The appearance of each element in a circular gauge chart, such as axes, ranges, axes intervals, pointer positions, label positions, and tick positions, can be customized easily.


Gauge title

Add a title to visualize additional information on a circular gauge chart. You can also customize the font of the title in the gauge.

ASP.NET CORE circular gauge chart rendered with title


Touch and Browser support

The interactive circular gauge control also support touch interactions.

Touch illustration

Touch support

All the features in circular gauge chart will work on touch devices with zero configuration. Use the touch features such as tooltip and pointer drag without any customization.

Responsive illustration

Responsive

You can view the circular gauge on various devices. It is also possible to hide specific elements in the gauges for particular screen sizes by making a very minimal change in the gauge events.

Cross browser illustration

Cross browser support

You can render circular gauge control in all the modern browsers.


60+ ASP.NET CORE UI CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon