Add a circular scale to your ASP.NET MVC application.
The RadialGauge control displays a circular scale with an indicator that represents a single value and optional ranges to represent reference values. You can use the RadialGauge as a simple indicator, or set the IsReadOnly property to false and use it as an input control. You can also populate the Ranges collection to define ranges of interest, which are shown in different colors.
The radial gauge control offers a ShowText property that determines which values the gauge should display as text.
The RadialGauge offers two properties to configure its layout: StartAngle and SweepAngle. The StartAngle property specifies the RadialGauge's starting angle or its rotation. The SweepAngle property specifies an angle representing the length of the RadialGauge's arc. The RadialGauge also offers an AutoScale property. When AutoScale is set to true, the RadialGauge will be automatically scaled to fill its containing element.
Customize with Themes
The appearance of the gauge controls is largely defined in CSS. You can customize the appearance of all MVC controls to achieve a consistent, attractive look with several professionally-designed themes, or use the default theme.
RadialGauge has a Ranges property that contains an array of Range objects. By default, the ranges are displayed on the face of the gauge to indicate zones of interest, but the ShowRanges property can be used to hide the ranges. The gauge will determine which range contains the current gauge value and will apply that range's color to the gauge pointer.
Display Needles Bound to the Gauge Value
Gauge needles, or pointers, are used to indicate the gauge value, and are often the alternative to the filled-bar design of most modern gauges. The RadialGauge control for ASP.NET Core MVC now supports needle-based pointers with custom shapes and lengths.
- Templates & Scaffolders
- Standard Template
- AJAX Binding Template
- Model Binding Template
- Spreadsheet Template
- ASP.NET MVC Control Wizard
- Input & Editing
- Color Picker
- Masked Input
- Numeric Input