ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in ASP.NET MVC Circular Gauge control

22 Jul 2021 / 11 minutes to read

This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.

Circular gauge dimensions

Behavior API in Essential JS 1 API in Essential JS 2
Height Property: height

@Html.EJ().CircularGauge("container")
.Height("400px")		 Property: height

@Html.EJS().CircularGauge("container")
.Height("400px").Render()
Width Property: width

@Html.EJ().CircularGauge("container")
.Width("100px")		 Property: width

@Html.EJS().CircularGauge("container")
.Height("150px").Render()
Height(In Percentage) Not Applicable Property: height

@Html.EJS().CircularGauge("container")
.Height("50%").Render()
Width(In Percentage) Not Applicable Property: width

@Html.EJS().CircularGauge("container")
.Height("80%").Render()

Axis Line

Behavior API in Essential JS 1 API in Essential JS 2
Axisline Width Property: scales.size

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.ShowScaleBar(true)
.size(1).Add())		 Property: axes.lineStyle.width

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LineStyle(new CircularGaugeLine
{ Width = 0 }).Add()).Render()
Axisline Color Property: scales.color

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.ShowScaleBar(true)
.color('red').Add())		 Property: axes.lineStyle.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LineStyle(new CircularGaugeLine
{ color = 'red' }).Add()).Render()
Axisline BackgroundColor Not Applicable Property: axes.background

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Background("red")
.Add()).Render()
Axisline Direction Property: scales.direction

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.Direction('CounterClockwise')
.color('red').Add())		 Property: axes.direction

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Direction(GaugeDirection.AntiClockWise)
.Add()).Render()
Axisline Radius Property: scales.radius

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.Radius('150').color('red').Add())		 Property: axes.radius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Radius(150)
.Add()).Render()
Axisline Startangle Property: scales.startAngle

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.startAngle('150')
.color('red').Add())		 Property: axes.startAngle

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.StartAngle(150)
.Add()).Render()
Axisline Endangle Property: scales.sweepAngle

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.sweepAngle('150').color('red')
.Add())>		 Property: axes.endAngle

@Html.EJS().CircularGauge("container").Axes(axes => axes.EndAngle(70).Add()).Render()
Minimum Axisvalue Property: scales.minimum

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.Minimum(20)
.Add())		 Property: axes.minimum

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Minimum(20)
.Add()).Render()
Maximum Axisvalue Property: scales.maximum

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.maximum(200).Add())		 Property: axes.maximum

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Maximum(200)
.Add()).Render()

Ticks

Behavior API in Essential JS 1 API in Essential JS 2
Type of Ticks Property: scales.ticks.type

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.Add()}).Add()})		 Property: axes.majorTicks

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks.Add())
.Render()
Height of Major Ticks Property: scales.ticks.height

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.Height(12).Add()}).Add()})		 Property: axes.majorTicks.height

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks(mi => mi.Height(12))
.Add()).Render()
Width of Major Ticks Property: scales.ticks.width

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.Width(3).Add()}).Add()})		 Property: axes.majorTicks.width

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks(mi => mi.Width(2))
.Add()).Render()
Color of Major Ticks Property: scales.ticks.color

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.color('red').Add()}).Add()})		 Property: axes.majorTicks.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks(mi => mi.Color("red"))
.Add()).Render()
Offset of Major Ticks Property: scales.ticks.distanceFromScale

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.DistanceFromScale(10).Add()}).Add()})		 Property: axes.majorTicks.offset

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks(mi => mi.Offset(5))
.Add()).Render()
Angle of Major Ticks Property: scales.ticks.angle

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Major)
.Angle(10).Add()}).Add()})		 Not Applicable
Interval of Major Ticks Property: scales.majorIntervalValue

@Html.EJ().CircularGauge("container")
.Scales(sc => {MajorIntervalValue(10)
.Add()})		 Property: axes.majorTicks.interval

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MajorTicks(mi => mi.Interval(2))
.Add()).Render()
Height of Minor Ticks Property: scales.ticks.height

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Minor)
.Height(12).Add()}).Add()})		 Property: axes.minorTicks.height

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Height(12))
.Add()).Render()
Width of Minor Ticks Property: scales.ticks.width

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Minor)
.Width(3).Add()}).Add()})		 Property: axes.minorTicks.width

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Width(2))
.Add()).Render()
Color of Minor Ticks Property: scales.ticks.color

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Minor)
.color('red').Add()}).Add()})		 Property: axes.minorTicks.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Color("red"))
.Add()).Render()
Offset of Minor Ticks Property: scales.ticks.distanceFromScale

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Minor)
.DistanceFromScale(10).Add()}).Add()})		 Property: axes.minorTicks.offset

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Offset(5))
.Add()).Render()
Angle of Major Ticks Property: scales.ticks.angle

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ticks(tic => {tic.Type(CircularTickTypes.Minor)
.Angle(10).Add()}).Add()})		 Not Applicable
Interval of Minor Ticks Property: scales.MinorIntervalValue

@Html.EJ().CircularGauge("container")
.Scales(sc => {MinorIntervalValue(10)
.Add()})		 Property: axes.minorTicks.interval

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Interval(2))
.Add()).Render()

Labels

Behavior API in Essential JS 1 API in Essential JS 2
Autoangle Property: scales.labels.autoAngle

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.showLabels(true)
.Add()}).Add()})		 Property: axes.labelStyle.autoAngle

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.AutoAngle(true))
.Add()).Render()
Angle Property: scales.labels.angle

@Html.EJ().CircularGauge("container")
.Scales(sc => sc.showLabels(true).Labels(lbl => {lbl.Angle(20)
.Add()}).Add()})		 Not Applicable
Offset Property: scales.labels.distanceFromScales

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.DistanceFromScale(10)
.Add()}).Add()})		 Property: axes.labelStyle.offset

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Offset(5))
.Add()).Render()
Format Property: scales.labels.unitText

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.UnitText("Front")
.Add()}).Add()})		 Property: axes.labelStyle.format

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Format("KMPH"))
.Add()).Render()
UnitText Position Property: scales.labels.placement

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.Placement("Near")
.Add()}).Add()})		 Property: axes.labelStyle.position

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Position(Position.Inside))
.Add()).Render()
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.UseRangeColor(true))
.Add()).Render()
LabelText Color Property: scales.labels.color

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.Color("red")
.Add()}).Add()})		 Property: axes.labelStyle.font.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo.Color("red"))
.Add()).Render()
Opacity Property: scales.labels.opacity

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.Opacity(0.2)
.Add()}).Add()})		 Property: axes.labelStyle.font.opacity

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo.Opacity(0.5)))
.Add()).Render()
Label Font Family Property: scales.labels.font.fontFamily

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.font('font').Add()})
.Add()})
var font = new {fontFamily="aerial"}		 Property: axes.labelStyle.font.fontFamily

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo.FontFamily("Robato")))
.Add()).Render()
Label Font Style Property: scales.labels.font.fontStyle

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.font('font')
.Add()}).Add()})
var font = new {font-style="bold"}		 Property: axes.labelStyle.font.fontStyle

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo.FontStyle("Bold")))
.Add()).Render()
Label Font Size Property: scales.labels.font.size

@Html.EJ().CircularGauge("container")
.Scales(sc => {Labels(lbl => {lbl.font('font').Add()})
.Add()})
var font = new {size="12"}		 Property: axes.labelStyle.font.size

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo.Size("12")))
.Add()).Render()
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.LabelStyle(ls => ls.Font(fo => fo
.FontWeight("Regular"))).Add()).Render()

Ranges

Behavior API in Essential JS 1 API in Essential JS 2
Start Value Property: scales.ranges.startValue

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.StartValue(20)
.Add()}).Add()})		 Property: axes.ranges.start

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Start(20))
.Add()).Render()
End Value Property: scales.ranges.endValue

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.EndValue(30)
.Add()}).Add()})		 Property: axes.ranges.end

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.End(30))
.Add()).Render()
Start Width Property: scales.ranges.startWidth

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.StartWidth(10)
.Add()}).Add()})		 Property: axes.ranges.startWidth

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.StartWidth(10))
.Add()).Render()
End Width Property: scales.ranges.endWidth

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.EndWidth(10)
.Add()}).Add()})		 Property: axes.ranges.endWidth

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.EndWidth(10))
.Add()).Render()
Color Property: scales.ranges.backgroundColor

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.BackgroundColor('red')
.Add()}).Add()})		 Property: axes.ranges.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Color("red"))
.Add()).Render()
Offset Property: scales.ranges.distanceFromScale

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.DistanceFromScale(10))
.Add()}).Add()})		 Not Applicable
Placement Property: scales.ranges.placement

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.Placement('Far'))
.Add()}).Add()})		 Not Applicable
Opacity Property: scales.ranges.opacity

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.Opacity(0.5)
.Add()}).Add()})		 Not Applicable
Radius Not Applicable Property: axes.ranges.radius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Radius("30"))
.Add()).Render()
Rounded Corner Radius Not Applicable Property: axes.ranges.roundedCornerRadius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Ranges(ran => ran.RoundedCornerRadius(10)).Add())
.Render()
Border Property: scales.ranges.border

@Html.EJ().CircularGauge("container")
.Scales(sc => {Ranges(ran => {ran.Border.Color('blue')
.Add()}).Add()})		 Not Applicable

Needle Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Needle Pointer Property: scales.pointers.type

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Type(PointerType.Needle)
.Add()}).Add()})		 Property: axes.pointers.type

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Needle)
.Value(20)).Add()).Render()
Needle Pointer Color Property: scales.pointers.backgroundColor

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.BackgroundColor('red')
.Add()}).Add()})		 Property: axes.pointers.color

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Color("red"))
.Add()).Render()
Animation Property: enableAnimation

@Html.EJ().CircularGauge("container")
.EnableAnimation(true)		 Property: axes.pointers.animation

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Animation(true))
.Add()).Render()
Pointer Width Property: scales.pointers.width

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Width(10)
.Add()}).Add()})		 Property: axes.pointers.pointerWidth

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.PointerWidth(10))
.Add()).Render()
Pointer Radius Property: scales.pointers.distanceFromScale

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.DistanceFromScale(10)
.Add()}).Add()})		 Property: axes.pointers.radius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Radius("10"))
.Add()).Render()
Opacity Property: scales.pointers.opacity

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Opacity(0.5)
.Add()}).Add()})		 Not Applicable
Needle Type Property: scales.pointers.needleType

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.NeedleType("Triangle")
.Add()}).Add()})		 Not Applicable
Back Needle Length Property: scales.pointers.backNeedleLength

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.BackNeedleLength(10)
.Add()}).Add()})		 Property: axes.pointers.needleTail.length

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.NeedleTail(nd => nd.Length("10")))
.Add()).Render()

Marker Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Marker Pointer Property: scales.pointers.type

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Type(PointerType.Marker)
.Add()}).Add()})		 Property: axes.pointers.type

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker)
.Value(20)).Add()).Render()
Marker Type Property: scales.pointers.markerType

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.MarkerType(MarkerType.Diamond)
.Add()}).Add()})		 Property: axes.pointers.markerShape

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker)
.MarkerShape(GaugeShape.Diamond)).Add()).Render()
Marker Width Property: scales.pointers.width

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Width(10)
.Add()}).Add()})		 Property: axes.pointers.markerWidth

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker)
.MarkerWidth(10)).Add()).Render()
Marker Height Property: scales.pointers.length

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Length(20)
.Add()}).Add()})		 Property: axes.pointers.markerHeight

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker)
.MarkerHeight(20)).Add()).Render()
Marker Image Property: scales.pointers.imageUrl

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.ImageUrl('a.png')
.Add()}).Add()})		 Property: axes.pointers.imageUrl

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker)
.ImageUrl("a.png")).Add()).Render()
Border Customization Property: scales.pointers.border

@Html.EJ().CircularGauge("container")
.Scales(sc => {Pointers(po => {po.Border.Color('red')
.Add()}).Add()})		 Property: axes.pointers.border

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.Marker).Border(bo => bo.Color("red")
.Width(2))).Add()).Render()

Rangebar Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Rangebar Not Applicable Property: axes.pointers.type

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.RangeBar)
.Value(20)).Add()).Render()
Rounded Corner Radius Not Applicable Property: axes.pointers.roundedCornerRadius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Pointers(pt => pt.Type(PointerType.RangeBar)
.RoundedCornerRadius(10).Add()).Render()

Annotations

Behavior API in Essential JS 1 API in Essential JS 2
Content Property: scales.customLabels.value

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 =>
{c1.Value("Circular Gauge")
.Add()}).Add()})		 Property: axes.annotations.content

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.Content("Circular Gauge"))
.Add()).Render()
Angle Property: scales.customLabels.textAngle

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 =>
{c1.TextAngle(90)
.Add()}).Add()})		 Property: axes.annotations.angle

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.Angle(90))
.Add()).Render()
Font Family Property: scales.customLabels.font.fontFamily

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 =>
{c1.Font(fon => fon.
FontFamily("Arial").Add()).Add()}).Add()})		 Property: axes.annotations.textStyle.fontFamily

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.TextStyle(text => text.FontFamily("Roboto")))
.Add()).Render()
Font Color Property: scales.customLabels.color

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 => {c1.Color('red')
.Add()}).Add()})		 Property: axes.annotations.textStyle.color

@html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.TextStyle(text => text.Color("Red"))
.Add()).Render()
Auto Angle Not Applicable Property: axes.annotations.autoAngle

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.AutoAngle(true))
.Add()).Render()
Radius Not Applicable Property: axes.annotations.radius

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.Radius("10"))
.Add()).Render()
Annotation Position Property: scales.customLabels.position

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 =>
{c1.Position(pos => pos.X(5)
.Y(-10).Add()).Add()}).Add()})		 Not Applicable
Annotation Position Type Property: scales.customLabels.positionType

@Html.EJ().CircularGauge("container")
.Scales(sc => {CustomLabels(c1 =>
{c1.CustomLabelPositionType
(CustomLabelPositionType.Outer)
.Add()}).Add()})		 Not Applicable
ZIndex Not Applicable Property: axes.annotations.zIndex

@Html.EJS().CircularGauge("container")
.Axes(axes => axes.Annotations(an => an.ZIndex("1"))
.Add()).Render()

Appearance

Behavior API in Essential JS 1 API in Essential JS 2
Title Not Applicable Property: title

@Html.EJS().CircularGauge("container")
.Title("Circular Gauge").Render()
Background Color Property: backgroundColor

@Html.EJ().CircularGauge("container")
.BackgroundColor('red')		 Property: background

@Html.EJS().CircularGauge("container")
.Background("Red").Render()
Localization Property: locale

@Html.EJ().CircularGauge("container")
.Locale('en-US')		 Property: locale

@Html.EJS().CircularGauge("container")
.Locale("en-US").Render()
Border Not Applicable Property: border

@Html.EJS().CircularGauge("container")
.Border(bo => bo.Color("red").Width(2)).Render()
Center of X Not Applicable Property: centerX

@Html.EJS().CircularGauge("container")
.CenterX("120px").Render()
Center of Y Not Applicable Property: centerY

@Html.EJS().CircularGauge("container")
.CenterY("150px").Render()
Theme Property: theme

@Html.EJ().CircularGauge("container")
.Theme('Material')		 Property: theme

@Html.EJS().CircularGauge("container")
.Theme(GaugeTheme.Material).Render()
Margin Not Applicable Property: margin

@Html.EJS().CircularGauge("container")
.Margin(mar => mar.Left(10).Right(10)).Render()

Events

Behavior API in Essential JS 1 API in Essential JS 2
Annotation Event Event: drawCustomLabel

@Html.EJ().CircularGauge("container")
.DrawCustomLabel("customLabel")
function customLabel(args) {}		 Event: annotationRender

@Html.EJS().CircularGauge("container")
.AnnotationRender("annotationRender").Render()
<script>function annotationRender(args) {}</script>
Label Event Event: drawLabels

@Html.EJ().CircularGauge("container")
.DrawLabels("drawLabels")
function drawLabels(args) {}		 Event: axisLabelRender

@Html.EJS().CircularGauge("container")
.AxisLabelRender("axisLabelRender").Render()
<script>function axisLabelRender(args) {}</script>
Load Event Event: load

@Html.EJ().CircularGauge("container")
.Load("load")
function load(args) {}		 Event: load

@Html.EJS().CircularGauge("container")
.Load("load").Render()
<script>function load(args) {}</script>
Loaded Event Event: loaded

@Html.EJ().CircularGauge("container")
.Loaded("loaded")
function loaded(args) {}		 Event: loaded

@Html.EJS().CircularGauge("container")
.Loaded("loaded").Render()
<script>function loaded(args) {}</script>
Tooltip Rendered Event Not Applicable Event: tooltipRender

@Html.EJS().CircularGauge("container")
.TooltipRender("tooltipRender").Render()
<script>function tooltipRender(args) {}</script>
Resized Rendered Event Not Applicable Event: resized

@Html.EJS().CircularGauge("container")
.Resized("resized").Render()
function resized(args) {}
Animation Event Not Applicable Event: animationComplete

@Html.EJS().CircularGauge("container")
.AnimationComplete("animationComplete").Render()
<script>function animationComplete(args) {}</script>
Mousedown Event Event: mouseClick

@Html.EJ().CircularGauge("container")
.MouseClick("mouseClick")
function mouseClick(args) {}		 Event: gaugeMouseDown

@Html.EJS().CircularGauge("container")
.GaugeMouseDown("gaugeMouseDown").Render()
<script>function gaugeMouseDown(args) {}</script>
Mousemove Event Event: mouseClickMove

@Html.EJ().CircularGauge("container")
.MouseClickMove("mouseClickMove")
function mouseClickMove(args) {}		 Event: gaugeMouseLeave

@Html.EJS().CircularGauge("container")
.GaugeMouseLeave("gaugeMouseLeave").Render()
<script>function gaugeMouseLeave(args) {}</script>
Mouseup Event Event: mouseClickUp

@Html.EJ().CircularGauge("container")
.MouseClickUp("mouseClickUp")
function mouseClickUp(args) {}		 Event: gaugeMouseUp

@Html.EJS().CircularGauge("container")
.GaugeMouseUp("gaugeMouseUp").Render()
<script>function gaugeMouseUp(args) {}</script>
Pointerdrag Move Event Event: drawPointers

@Html.EJ().CircularGauge("container")
.DrawPointers("drawPointers")
function drawPointers(args) {}		 Event: dragMove

@Html.EJS().CircularGauge("container")
.DragMove("dragMove").Render()
<script>function dragMove(args) {}</script>
Draw Range Event Event: drawRange

@Html.EJ().CircularGauge("container")
.DrawRange("drawRange")
function drawRange(args) {}		 Not Applicable
Draw Ticks Event Event: drawTicks

@Html.EJ().CircularGauge("container")
.DrawTicks("drawTicks")
function drawTicks(args) {}		 Not Applicable
Legend Render Event Event: legendItemRender

@Html.EJ().CircularGauge("container")
.LegendItemRender("legendItemRender")
function legendItemRender(args) {}		 Not Applicable
Animation Complete Event Not Applicable Event: animationComplete

@Html.EJS().CircularGauge("container")
.AnimationComplete("animationComplete").Render()
<script>function animationComplete(args) {}</script>
Right Click Event Event: rightClick

@Html.EJ().CircularGauge("container")
.RightClick("rightClick")
function rightClick(args) {}		 Not Applicable
Double Click Event Event: doubleClick

@Html.EJ().CircularGauge("container")
.DoubleClick("doubleClick")
function doubleClick(args) {}		 Not Applicable
Previous
Next