Class SfCircularGauge

The circular gauge component is used to visualize the numeric values on the circular scale. The circular gauge contains labels, ticks, and an axis line to customize its appearance.

Inheritance
System.Object
SfBaseComponent
SfCircularGauge
Inherited Members
Namespace: Syncfusion.Blazor.CircularGauge
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfCircularGauge : SfBaseComponent

Constructors

SfCircularGauge()

Declaration
public SfCircularGauge()

Properties

AllowImageExport

Gets or sets a value indicating whether to enable the export to image functionality in the circular gauge.

Declaration
public bool AllowImageExport { get; set; }
Property Value
Type Description
System.Boolean

true to allow the circular gauge to be exported as an image; otherwise, false. The default value is false.
Remarks

Set this property to true to allow users to export the gauge as an image file.

AllowMargin

Gets or sets a value indicating whether to enable margin padding in the circular gauge.

Declaration
public bool AllowMargin { get; set; }
Property Value
Type Description
System.Boolean

true to enable margin padding; otherwise, false. The default value is true.
Remarks

Margin padding provides spacing between the gauge's boundary and its content, enhancing visual appeal.

AllowPdfExport

Gets or sets a value indicating whether to enable the export to PDF functionality in the circular gauge.

Declaration
public bool AllowPdfExport { get; set; }
Property Value
Type Description
System.Boolean

true to allow the circular gauge to be exported as a PDF; otherwise, false. The default value is false.
Remarks

Enable this functionality to allow users to generate and download a PDF representation of the circular gauge.

AllowPrint

Gets or sets a value indicating whether to enable the print functionality in the circular gauge.

Declaration
public bool AllowPrint { get; set; }
Property Value
Type Description
System.Boolean

true to enable the print functionality; otherwise, false. The default value is false.
Remarks

Use this property to enable direct printing of the circular gauge from the browser.

AnimationDuration

Gets or sets the duration time for the loading animation in the Circular Gauge.

Declaration
public double AnimationDuration { get; set; }
Property Value
Type Description
System.Double

A double value that modifies the duration of the loading animation.
Remarks

Set to zero to disable animations. Positive values determine the length of animation effects.

Axes

Gets or sets the options for customizing the axes of circular gauge.

Declaration
public List<CircularGaugeAxis> Axes { get; set; }
Property Value
Type Description
System.Collections.Generic.List<CircularGaugeAxis>

A list of CircularGaugeAxis objects that represents the option for customizing the axes of CircularGauge component.

Background

Gets or sets the background color of the gauge.

Declaration
public string Background { get; set; }
Property Value
Type Description
System.String

A string specifying the background color, in hex code, rgba string, or other valid CSS color strings.
Remarks

Setting this property changes the background color of the entire gauge component.

CenterX

Gets or sets the X coordinate of the center of the circular gauge.

Declaration
public string CenterX { get; set; }
Property Value
Type Description
System.String

A string specifying the X coordinate of the circular gauge's center.
Remarks

This property determines the horizontal positioning of the gauge's center point.

CenterY

Gets or sets the Y coordinate of the center of the circular gauge.

Declaration
public string CenterY { get; set; }
Property Value
Type Description
System.String

A string specifying the Y coordinate of the circular gauge's center.
Remarks

This property determines the vertical positioning of the gauge's center point.

ChildContent

Gets or sets the content of the UI element.

Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment

A Microsoft.AspNetCore.Components.RenderFragment that defines the child content of the UI element within the circular gauge.
Remarks

Use this property to provide custom UI components or content within the circular gauge component.

Description

Gets or sets the description for assistive technology about the gauge.

Declaration
public string Description { get; set; }
Property Value
Type Description
System.String

A string providing information about the gauge for assistive technology users.
Remarks

This description aids screen readers in delivering context or additional information about the circular gauge to users with visual impairments.

EnableGroupingSeparator

Gets or sets a value indicating whether to enable the grouping separator for numbers.

Declaration
public bool EnableGroupingSeparator { get; set; }
Property Value
Type Description
System.Boolean

true to enable the grouping separator; otherwise, false. The default value is true.
Remarks

The grouping separator helps format large numbers by adding commas or other separators for clarity.

EnablePointerDrag

Gets or sets a value indicating whether to enable the drag movement for the pointer in the circular gauge.

Declaration
public bool EnablePointerDrag { get; set; }
Property Value
Type Description
System.Boolean

true to enable pointer dragging; otherwise, false. The default value is false.
Remarks

When enabled, users can drag pointers across the gauge for dynamic interaction.

EnableRangeDrag

Gets or sets a value indicating whether to enable the drag movement for the ranges in the circular gauge.

Declaration
public bool EnableRangeDrag { get; set; }
Property Value
Type Description
System.Boolean

true to enable range dragging; otherwise, false. The default value is false.
Remarks

Allowing drag for ranges lets users adjust the gauge ranges through direct manipulation.

Height

Gets or sets the height of the circular gauge.

Declaration
public string Height { get; set; }
Property Value
Type Description
System.String

A string that specifies the height of the circular gauge, such as '100px' or '100%'.
Remarks

If set to a percentage, the gauge will occupy that percentage of its parent container's height.

ID

Gets or sets the ID string for the circular gauge component.

Declaration
public string ID { get; set; }
Property Value
Type Description
System.String

A string representing the unique identifier of the circular gauge component.
Remarks

This property is used to assign a specific ID to the circular gauge for identification and manipulation within the DOM.

MoveToCenter

Gets or sets a value indicating whether to center the half or quarter circular gauge when CenterX and CenterY are not specified.

Declaration
public bool MoveToCenter { get; set; }
Property Value
Type Description
System.Boolean

true if the gauge should move to the center; otherwise, false.
Remarks

Centering is particularly useful for smaller or partially visible gauge configurations.

TabIndex

Gets or sets the tab index for the circular gauge.

Declaration
public int TabIndex { get; set; }
Property Value
Type Description
System.Int32

An int representing the tab index value for tab navigation. Default is 0.
Remarks

This property sets the order of keyboard navigation for accessible interaction with the gauge.

Theme

Gets or sets the theme for the circular gauge.

Declaration
public Theme Theme { get; set; }
Property Value
Type Description
Theme

A value from the Theme enum representing the theme. Default is Material.
Remarks

Themes change the visual style and appearance of the gauge to suit different design preferences.

Title

Gets or sets the title of the circular gauge.

Declaration
public string Title { get; set; }
Property Value
Type Description
System.String

A string representing the title. Default is an empty string.
Remarks

The title provides a text label or description at the top of the gauge, contextualizing its purpose.

Width

Gets or sets the width of the circular gauge.

Declaration
public string Width { get; set; }
Property Value
Type Description
System.String

A string that specifies the width of the circular gauge, such as '100px' or '100%'.
Remarks

If set to a percentage, the gauge will occupy that percentage of its parent container's width.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

Dispose(Boolean)

Disposes the property values during the destroy of the component that is hold up for the execution of the component.

Declaration
protected override void Dispose(bool disposing)
Parameters
Type Name Description
System.Boolean disposing
Overrides

ExportAsync(ExportType, String, Nullable<PdfPageOrientation>, Boolean)

The method is used to perform the export functionality for the circular gauge.

Declaration
public Task<string> ExportAsync(ExportType type, string fileName, Nullable<PdfPageOrientation> orientation = null, bool allowDownload = true)
Parameters
Type Name Description
ExportType type

Specifies the format of the file to export the circular gauge.
System.String fileName

Specifies the name of the file for the exported circular gauge.
System.Nullable<Syncfusion.PdfExport.PdfPageOrientation> orientation

Specifies the orientation of the exported PDF document when the type parameter is PDF.
System.Boolean allowDownload

Specifies whether the exported file is to be downloaded or not.
Returns
Type Description
System.Threading.Tasks.Task<System.String>

Returns base64 string of the exported circular gauge when allowDownload parameter is false.

OnAfterRenderAsync(Boolean)

OnAfterRenderAsync is a lifecycle method that is invoked each time the component is rendered in the application.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender

Specifies the value indicating whether the component is rendered for the first time.
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.
Overrides

OnInitializedAsync()

OnInitializedAsync method is called when the component has received its initial parameters.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.
Overrides

OnParametersSetAsync()

OnParametersSetAsync is a lifecycle method that is invoked when the component has received parameters, and the incoming values have been assigned to the properties.

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.

PrintAsync()

The method is used to print the rendered circular gauge.

Declaration
public Task PrintAsync()
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.

RefreshAsync()

Refreshes the circular gauge component, causing it to re-render.

Declaration
public Task RefreshAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing the asynchronous operation.

SetAnnotationValueAsync(Int32, Int32, String)

This method is used to set the annotation content dynamically for circular gauge.

Declaration
public Task SetAnnotationValueAsync(int axisIndex, int annotationIndex, string content)
Parameters
Type Name Description
System.Int32 axisIndex

Specifies the index number of the axis in which the annotation content is to be changed.
System.Int32 annotationIndex

Specifies the index number of the annotation in which the content is to be changed.
System.String content

Specifies the content of the annotation to be updated in it.
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.

SetPointerValueAsync(Int32, Int32, Double)

The method is used to set the pointer value dynamically for circular gauge.

Declaration
public Task SetPointerValueAsync(int axisIndex, int pointerIndex, double pointerValue)
Parameters
Type Name Description
System.Int32 axisIndex

Specifies the index number of the axis in which the pointer value is to be changed.
System.Int32 pointerIndex

Specifies the index number of the pointer in which the value is to be changed.
System.Double pointerValue

Specifies the value of the pointer to be updated in it.
Returns
Type Description
System.Threading.Tasks.Task

System.Threading.Tasks.Task representing the asynchronous operation.

SetRangeValue(Int32, Int32, Double, Double)

The method is used to set the range values dynamically for circular gauge.

Declaration
public void SetRangeValue(int axisIndex, int rangeIndex, double start, double end)
Parameters
Type Name Description
System.Int32 axisIndex

Specifies the index number of the axis in which the range value is to be changed.
System.Int32 rangeIndex

Specifies the index number of the range in which the value is to be changed.
System.Double start

Specifies the start value of the range to be updated in it.
System.Double end

Specifies the end value of the range to be updated in it.

ShouldRender()

Declaration
protected override bool ShouldRender()
Returns
Type
System.Boolean

UpdateChildProperties(String, Object)

UpdateChildProperties is used to update the child properties.

Declaration
public void UpdateChildProperties(string key, object keyValue)
Parameters
Type Name Description
System.String key

Specifies the child property.
System.Object keyValue

Specifies the child property value.