CircularGauge

23 Sep 202511 minutes to read

Represents the circular gauge control. This is used to customize the properties of the circular gauge to visualize the data in circular scale.

<div id="gauge"/>
<script>
  var gaugeObj = new CircularGauge();
  gaugeObj.appendTo("#gauge");
</script>

Properties

allowImageExport boolean

Enables and disables the export to image functionality in circular gauge.

Defaults to false

allowMargin boolean

Enables or disables the ability of the gauge to be rendered to the complete width. The left, right, top and bottom spacing will not be considered in the gauge when this property is disabled.

Defaults to true

allowPdfExport boolean

Enables and disables the export to pdf functionality in circular gauge.

Defaults to false

allowPrint boolean

Enables and disables the print functionality in circular gauge.

Defaults to false

allowRangePreRender boolean

Allow the range element to be rendered ahead of the axis element, when this property is set to “true”.

Defaults to true

animationDuration number

Sets and gets the duration of animation in milliseconds in circular gauge.

Defaults to 0

axes AxisModel[]

Sets and gets the options for customizing the axes of circular gauge.

background string

Sets and gets the background color of the gauge. This property accepts value in hex code, rgba string as a valid CSS color string.

Defaults to null

border BorderModel

Sets and gets the options for customizing the style properties of the gauge border.

centerX string

Sets and gets the X coordinate of the center of the circular gauge.

Defaults to null

centerY string

Sets and gets the Y coordinate of the center of the circular gauge.

Defaults to null

description string

Sets and gets the information about gauge for assistive technology.

Defaults to null

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePointerDrag boolean

Enables and disables drag movement of the pointer in the circular gauge.

Defaults to false

enableRangeDrag boolean

Enables and disables the drag movement of the ranges in the circular gauge.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

height string

Sets and gets the height of the circular gauge as a string in order to provide input as both like ‘100px’ or ‘100%’.
If specified as ‘100%, gauge will render to the full height of its parent element.

Defaults to null

legendSettings LegendSettingsModel

Sets and gets the options for customizing the legend of the circular gauge.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

margin MarginModel

Sets and gets the options to customize the left, right, top and bottom margins of the circular gauge.

moveToCenter boolean

Enables and disables placing the half or quarter circle in center, if centerX and centerY properties are not specified.

Defaults to false

tabIndex number

Sets and gets the tab index value for the circular gauge.

Defaults to 0

theme GaugeTheme

Sets and gets the theme styles supported for circular gauge. When the theme is set, the styles associated with the theme will be set in the gauge.

Defaults to Material

title string

Sets and gets the title for circular gauge.

Defaults to ’’

titleStyle FontModel

Sets and gets the options for customizing the title for circular gauge.

Sets and gets the options for customizing the tooltip of gauge.

useGroupingSeparator boolean

Enables and disables the grouping separator should be used for a number.

Defaults to false

width string

Sets and gets the width of the circular gauge as a string in order to provide input as both like ‘100px’ or ‘100%’.
If specified as ‘100%, gauge will render to the full width of its parent element.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

This method destroys the circular gauge. This method removes the events associated with the circular gauge and disposes the objects created for rendering and updating the circular gauge.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

export

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

Parameter	Type	Description
type	`ExportType`	Specifies the type of the export.
fileName	`string`	Specifies the file name for the exported file.
orientation (optional)	`PdfPageOrientation`	Specifies the orientation for the exported PDF document.
allowDownload (optional)	`boolean`	Specifies whether to download as a file.

Returns Promise

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

print

This method is used to print the rendered circular gauge.

Parameter	Type	Description
id (optional)	`string[]` \| `string` \| `Element`	Specifies the element to print the circular gauge.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

setAnnotationValue

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

Parameter	Type	Description
axisIndex	`number`	Specifies the index value for the axis in circular gauge.
annotationIndex	`number`	Specifies the index value for the annotation in circular gauge.
content	`string` \| `Function`	Specifies the content for the annotation in circular gauge.

Returns void

setPointerValue

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

Parameter	Type	Description
axisIndex	`number`	Specifies the index value for the axis in circular gauge.
pointerIndex	`number`	Specifies the index value for the pointer in circular gauge.
value	`number`	Specifies the value for the pointer in circular gauge.

Returns void

setRangeValue

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

Parameter	Type	Description
axisIndex	`number`	Specifies the index value for the axis in circular gauge.
rangeIndex	`number`	Specifies the index value for the range in circular gauge.
start	`number`	Specifies the start value for the current range in circular gauge.
end	`number`	Specifies the end value for the current range in circular gauge.