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

SfBaseComponent.Dispose()

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

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

SfBaseComponent.Dispose(Boolean)

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

SfBaseComponent.OnAfterRenderAsync(Boolean)

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

SfBaseComponent.OnInitializedAsync()

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.