Migration from Essential JS 1
17 Feb 202223 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 |