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

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

22 Jul 2021 / 14 minutes to read

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

Linear gauge dimensions

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

@Html.EJ().LinearGauge("container")
.Height("150px")		 Property: height

@Html.EJS().LinearGauge("container")
.Height("150px").Render()
Width Property: width

@Html.EJ().LinearGauge("container")
.Width("200px")		 Property: width

@Html.EJS().LinearGauge("container")
.Width("200px").Render()
Height(In Percentage) Not Applicable Property: height

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

@Html.EJS().LinearGauge("container")
.Height("100%").Render()

Line customization

Behavior API in Essential JS 1 API in Essential JS 2
Height Property: scales.length

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Length(300).Add()})		 Property: axes.line.height

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Line(line => line.Height(100)).Add())
.Render()
Width Property: scales.width

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Width(300).Add()})		 Property: axes.line.width

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Line(line => line.Width(50)).Add())
.Render()
Color Property: scales.backgroundColor

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.BackgroundColor("blue").Add()})		 Property: axes.line.color

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Line(line => line.Color("Blue")).Add())
.Render()
Offset Not Applicable Property: axes.line.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Line(line => line.Offset(2)).Add())
.Render()
Opacity Property: scales.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Opacity(0.2).Add()})		 Not Applicable
DashArray Not Applicable Property: axes.line.dashArray

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Line(line => line.DashArray(1)).Add())
.Render()

Ticks

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval)}).Add()
.Add()})		 Property: axes.majorTicks.height

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Height(8).Add()
}).Add()})		 Property: axes.majorTicks.height

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Width(5).Add()
}).Add()})		 Property: axes.majorTicks.width

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Color("Blue").Add()
}).Add()})		 Property: axes.majorTicks.color

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.MajorTicks(ma => ma.Color("Blue")).Add())
.Render()
Offset for Major Ticks Property: scales.ticks.distanceFromScale

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval)
.distanceFromScale(5).Add();
}).Add()})		 Property: axes.majorTicks.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.MajorTicks(ma => ma.Offset(2)).Add())
.Render()
Interval of Major Ticks Property: scales.majorIntervalValue

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.majorIntervalValue(15).Add()})		 Property: axes.majorTicks.interval

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.MajorTicks(ma => ma.Interval(15)).Add())
.Render()
Angle of Major Ticks Property: scales.ticks.angle

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Angle(30).Add();
}).Add()})		 Not Applicable
Opacity of Major Ticks Property: scales.ticks.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MajorInterval).Opacity(0.2).Add();
}).Add()})		 Not Applicable
Height of Minor Ticks Property: scales.ticks.height

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Height(8).Add()
}).Add()})		 Property: axes.minorTicks.height

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Width(5).Add()
}).Add()})		 Property: axes.minorTicks.width

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Color("Blue").Add()
}).Add()})		 Property: axes.minorTicks.color

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval)
.distanceFromScale(5).Add();
}).Add()})		 Property: axes.minorTicks.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Offset(2)).Add())
.Render()
Interval of Minor Ticks Property: scales.minorIntervalValue

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.minorIntervalValue(15).Add()})		 Property: axes.minorTicks.interval

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.MinorTicks(mi => mi.Interval(15)).Add())
.Render()
Angle of Minor Ticks Property: scales.ticks.angle

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Angle(30).Add();
}).Add()})		 Not Applicable
Opacity of Minor Ticks Property: scales.ticks.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ticks(tic => {tic.Type(TickType.MinorInterval).Opacity(0.2).Add();
}).Add()})		 Not Applicable

Labels

Behavior API in Essential JS 1 API in Essential JS 2
Angle Property: scales.labels.angle

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.Angle(15).Add();
}).Add()})		 Not Applicable
Offset Property: scales.labels.distanceFromScale

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.distanceFromScale(
dis => {dis.x(15).Add();}).Add();
}).Add()})		 Property: axes.labelStyle.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Offset(2)).Add())
.Render()
Format Property: scales.labels.unitText

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.UnitText("F").Add();
}).Add()})		 Property: axes.labelStyle.format

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Format("C")).Add())
.Render()
Unit Text Placement Property: scales.labels.unitTextPlacement

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.UnitTextPlacement("Front").Add();
}).Add()})		 Not Applicable
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.UseRangeColor(true))
.Add()).Render()
Opacity Property: scales.labels.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.Opacity(0.5)
.Add();}).Add()})		 Property: axes.labelStyle.font.opacity

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { opacity = 0.5 };
Label Text Color Property: scales.labels.textColor

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.TextColor("red")
.Add();}).Add()})		 Property: axes.labelStyle.font.color

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { color= 'red' };
Label Font Family Property: scales.labels.font.fontFamily

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.FontFamily("SegoeUI").Add();}).Add();
}).Add()})		 Property: axes.labelStyle.font.fontFamily

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { fontFamily: 'Arial' };
Label Font Style Property: scales.labels.font.fontStyle

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.FontStyle("Normal").Add();}).Add();
}).Add()})		 Property: axes.labelStyle.font.fontStyle

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { fontStyle= 'Bold' };
Label Size Property: scales.labels.font.size

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Labels(lab => {lab.Font(fon => {fon.Size("20px").Add();}).Add();
}).Add()})		 Property: axes.labelStyle.font.size

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { size= "15px" };
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.LabelStyle(lab => lab.Font("fontstyle"))
.Add()).Render()
var fontstyle = new { fontWeight= '4' };

Axis

Behavior API in Essential JS 1 API in Essential JS 2
Minimum Value Property: scales.minimum

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

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Maximum(20).Add()})		 Property: axes.maximum

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Maximum(20).Add()).Render()
Inverted Position Not Applicable Property: axes.isInversed

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.IsInversed(true).Add()).Render()
Opposed Position Not Applicable Property: axes.opposedPosition

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.OpposedPosition(true).Add()).Render()

Ranges

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

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

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

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

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

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

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

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

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(ran => {ran.BackgroundColor("Red")
.Add();}).Add()})		 Property: axes.ranges.color

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(ran => {ran.DistanceFromScale(10)
.Add();}).Add()})		 Property: axes.ranges.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Offset(5))
.Add()).Render()
Range Position Property: scales.ranges.placement

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(ran => {ran.Placement("Near")
.Add();}).Add()})		 Property: axes.ranges.position

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Position("Inside"))
.Add()).Render()
Opacity Property: scales.ranges.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(ran => {ran.Opacity(0.5)
.Add();}).Add()})		 Not Applicable
Border Customization Property: scales.ranges.border

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(ran => {ran.Border(bor => {bor.Color("green")
.Width(2).Add();}).Add();}).Add()})		 Property: axes.ranges.border

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.Ranges(ran => ran.Border(border))
.Add()).Render()
var border = new { color='green', width="2"};

Bar Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Bar Pointer Property: scales.ranges.barPointers.value

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.Value(20).Add();}).Add()})		 Property: axes.pointers.value

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar")).Add()).Render()
Color of Bar Pointer Property: scales.ranges.barPointers.backgroundColor

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.Value(20)
.backgroundColor("red").Add();}).Add()})		 Property: axes.pointers.color

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").Color("Red")).Add()).Render()
Offset of Bar Pointer Property: scales.ranges.barPointers.distanceFromScale

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.distanceFromScale(20)
.Add();}).Add()})		 Property: axes.pointers.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").Offset(20)).Add()).Render()
Opacity of Bar Pointer Property: scales.ranges.barPointers.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.Opacity(0.5)
.Add();}).Add()})		 Property: axes.pointers.opacity

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").Opacity(0.5)).Add()).Render()
Width of Bar Pointer Property: scales.ranges.barPointers.width

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.Width(2)
.Add();}).Add()})		 Property: axes.pointers.width

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").Width(2)).Add()).Render()
Gradients of Bar Pointer Property: scales.ranges.barPointers.gradients

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {
br.gradients(gra => {gra.ColorStop(0).Color("#FFFFFF").Add();})
.Add();}).Add()})		 Not Applicable
Border of Bar Pointer Property: scales.ranges.barPointers.border

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(BarPointers => {br.Border(bor => {bor.Color("red").Width(2).Add();})
.Add();}).Add()})		 Property: axes.pointers.border

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").Border(border)).Add()).Render()
var border = new { color="red" width="2" };
Animation of Bar Pointer Property: enableAnimation

@Html.EJ().LinearGauge("container")
.EnableAnimation(true)		 Property: axes.pointers.animationDuration

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").animationDuration(1000)).Add()).Render()
Rounded Corner of Bar Pointer Not Applicable Property: axes.pointers.roundedCornerRadius

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("RangeBar").RoundedCornerRadius(10)).Add()).Render()

Marker Pointer

Behavior API in Essential JS 1 API in Essential JS 2
Marker Pointer Property: scales.ranges.markerPointers.value

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).Add();}).Add()})		 Property: axes.pointers.value

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker")).Add()).Render()
Color of Marker Pointer Property: scales.ranges.markerPointers.backgroundColor

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).Color("Red").Add();}).Add()})		 Property: axes.pointers.color

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Color("Red")).Add()).Render()
Offset of Marker Pointer Property: scales.ranges.markerPointers
.distanceFromScale

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Value(20).distanceFromScale(10).Add();})
.Add()})		 Property: axes.pointers.offset

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Offset(20)).Add()).Render()
Opacity of Marker Pointer Property: scales.ranges.markerPointers.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Opacity(0.5)
.Add();}).Add()})		 Property: axes.pointers.opacity

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Opacity(0.5)).Add()).Render()
Width of Marker Pointer Property: scales.ranges.markerPointers.width

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Width(2)
.Add();}).Add()})		 Property: axes.pointers.width

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Width(2)).Add()).Render()
Gradients of Marker Pointer Property: scales.ranges.markerPointers
.gradients

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {
mr.gradients(gra => {gra.ColorStop(0).Color("#FFFFFF").Add();})
.Add();}).Add()})		 Not Applicable
Border of Marker Pointer Property: scales.ranges.markerPointers.border

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Border(bor => {bor.Color("red").Width(2).Add();})
.Add();}).Add()})		 Property: axes.pointers.border

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Border(border)).Add()).Render()
var border = new { color="red" width="2" };
Animation of Marker Pointer Property: enableMarkerPointerAnimation

@Html.EJ().LinearGauge("container")
.EnableMarkerPointerAnimation(true)		 Property: axes.pointers.animationDuration

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").animationDuration(1000)).Add()).Render()
Type of Marker Pointer Property: scales.ranges.markerPointers.type

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Type("Diamond")
.Add();}).Add()})		 Property: axes.pointers.markerType

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").MarkerType("Diamond")).Add()).Render()
Placement of Marker Pointer Property: scales.ranges.markerPointers
.placement

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Ranges(MarkerPointers => {mr.Placement("Near")
.Add();}).Add()})		 Property: axes.pointers.placement

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").Placement("Near")).Add()).Render()
Drag of Marker Pointer Property: readOnly

@Html.EJ().LinearGauge("container")
.ReadOnly(true)		 Property: axes.pointers.enableDrag

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").EnableDrag(true)).Add()).Render()
Image Marker Pointer Not Applicable Property: axes.pointers.imageUrl

@Html.EJS().LinearGauge("container")
.Axes(axes => axes.pointers(po => po.Value(20)
.Type("Marker").ImageUrl("")).Add()).Render()

Annotation

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

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Value("Linear Gauge")
.Add();}).Add()})		 Property: annotations.content

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.Content("Linear Gauge").Add()).Render()
Horizontal Alignment Not Applicable Property: annotations.horizontalAlignment

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.HorizontalAlignment("Center").Add()).Render()
Vertical Alignment Not Applicable Property: annotations.verticalAlignment

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.VerticalAlignment("Center").Add()).Render()
Position of X Property: scales.customLabels.position.x

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Position(po => {po.X(20).Add();})
.Add();}).Add()})		 Property: annotations.x

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.X(35).Add()).Render()
Position of Y Property: scales.customLabels.position.y

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Position(po => {po.Y(20).Add();})
.Add();}).Add()})		 Property: annotations.y

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.Y(35).Add()).Render()
Z Index Not Applicable Property: annotations.zIndex

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.ZIndex("1").Add()).Render()
Axis Index Not Applicable Property: annotations.axisIndex

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.AxisIndex("0").Add()).Render()
Axis Value Not Applicable Property: annotations.axisValue

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.AxisValue("35").Add()).Render()
Font customization Property: scales.customLabels.font

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Font(fo => {fo.Size("20px").Add();})
.Add();}).Add()})		 Property: annotations.font

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.Font(font).Add()).Render()
var font =new {size='12px'}
Annotation Color Property: scales.customLabels.color

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Color("Red")
.Add();}).Add()})		 Property: annotations.font.color

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.Font(font).Add()).Render()
var font =new {color ="red"}
Opacity of Annotation Property: scales.customLabels.opacity

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.Opacity(0.4)
.Add();}).Add()})		 Property: annotations.font.opacity

@Html.EJS().LinearGauge("container")
.Annotations(ann => ann.Font(font).Add()).Render()
var font =new {opacity ="0.4"}
Position Type Property: scales.customLabels.positionType

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.PositionType("Outer")
.Add();}).Add()})		 Not applicable
TextAngle of Annotation Property: scales.customLabels.textAngle

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.customLabels(cus => {cus.TextAngle(25)
.Add();}).Add()})		 Not applicable

Tooltip

Behavior API in Essential JS 1 API in Essential JS 2
Tooltip for Pointer Not Applicable Property: tooltip.enable

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.Enable(true).Add()).Render()
Tooltip for Label Property: tooltip.showLabelTooltip

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.tooltip(tool => {tool.ShowLabelTooltip(true)
.Add();}).Add()})		 Not Applicable
Tooltip Format Not Applicable Property: tooltip.format

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.Format(${pointers.value}).Add()).Render()
Tooltip Color Not Applicable Property: tooltip.fill

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.Fill("Gray").Add()).Render()
Tooltip Template Property: tooltip.templateID

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.tooltip(tool => {tool.TemplateId(true)
.Add();}).Add()})		 Property: tooltip.template

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.Template("Temaplate").Add()).Render()
Tooltip Animation Not Applicable Property: tooltip.enableAnimation

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.EnableAnimation(true).Add()).Render()
Tooltip Border Not Applicable Property: tooltip.border

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.Border(border).Add()).Render()
var border = new {width: 2, color: 'red'}
Tooltip TextStyle Not Applicable Property: tooltip.textStyle

@Html.EJS().LinearGauge("container")
.Tooltip(tool => tool.TextStyle("Bold").Add()).Render()

Appearance of Linear Gauge

Behavior API in Essential JS 1 API in Essential JS 2
Background Color Property: backgroundColor

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

@Html.EJS().LinearGauge("container")
.Background("Red").Render()
Border Color Property: borderColor

@Html.EJ().LinearGauge("container")
.BorderColor("blue")		 Property: border.color

@Html.EJS().LinearGauge("container")
.Border(border).Render()
var border= new {color="red"}
Margin Not Applicable Property: margin

@Html.EJS().LinearGauge("container")
.Margin(margin).Render()
var margin= new {left: 40, right: 40, top: 40, bottom: 40}
Orientation Property: orientation

@Html.EJ().LinearGauge("container")
.Orientation("Vertical")		 Property: orientation

@Html.EJS().LinearGauge("container")
.Orientation("Vertical").Render()
Locale Property: locale

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

@Html.EJS().LinearGauge("container")
.Locale("en-US").Render()
Theme Property: theme

@Html.EJ().LinearGauge("container")
.Theme("saffron")		 Property: theme

@Html.EJS().LinearGauge("container")
.Theme("Material").Render()
Gauge Title Not Applicable Property: title

@Html.EJS().LinearGauge("container")
.Title("LinearGauge").Render()

Gauge Container type

Behavior API in Essential JS 1 API in Essential JS 2
Container Type Property: scales.type

@Html.EJ().LinearGauge("container")
.Scales(sc => {sc.Type("Thermometer").Add()})		 Property: container.type

@Html.EJS().LinearGauge("container")
.Container(con => con.Type("Thermometer").Add())
.Render()
Container Height Not Applicable Property: container.height

@Html.EJS().LinearGauge("container")
.Container(con => con.Type("Thermometer").Height(20).Add())
.Render()
Container Width Not Applicable Property: container.width

@Html.EJS().LinearGauge("container")
.Container(con => con.Type("Thermometer").Width(10).Add())
.Render()
Container Offset Not Applicable Property: container.offset

@Html.EJS().LinearGauge("container")
.Container(con => con.Type("Thermometer").Offset(5).Add())
.Render()

Events

Behavior API in Essential JS 1 API in Essential JS 2
Animation Complete Event Not Applicable Event: animationComplete

@Html.EJS().LinearGauge("container")
.AnimationComplete("animationComplete").Render()
function animationComplete(args) {}
Annotation Render Event Event: drawCustomLabel

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

@Html.EJS().LinearGauge("container")
.AnnotationRender("annotationRender").Render()
function annotationRender(args) {}
AxisLabel Render Event Event: drawLabels

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

@Html.EJS().LinearGauge("container")
.AxisLabelRender("axisLabelRender").Render()
function axisLabelRender(args) {}
Load Event Event: load

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

@Html.EJS().LinearGauge("container")
.Load("load").Render()
function load(args) {}
Loaded Event Not Applicable Event: loaded

@Html.EJS().LinearGauge("container")
.Loaded("loaded").Render()
function loaded(args) {}
Resize Event Not Applicable Event: resized

@Html.EJS().LinearGauge("container")
.Resized("resized").Render()
function resized(args) {}
Tooltip Render Event Not Applicable Event: tooltipRender

@Html.EJS().LinearGauge("container")
.TooltipRender("tooltipRender").Render()
function tooltipRender(args) {}
Value Change Event Not Applicable Event: valueChange

@Html.EJS().LinearGauge("container")
.ValueChange("valueChange").Render()
function valueChange(args) {}
Mouse Move Event Event: mouseClickMove

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

@Html.EJS().LinearGauge("container")
.GaugeMouseMove("gaugeMouseMove").Render()
function gaugeMouseMove(args) {}
Mouse Up Event Event: mouseClickUp

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

@Html.EJS().LinearGauge("container")
.GaugeMouseUp("gaugeMouseUp").Render()
function gaugeMouseUp(args) {}
Mouse Down Event Not Applicable Event: gaugeMouseDown

@Html.EJS().LinearGauge("container")
.GaugeMouseDown("gaugeMouseDown").Render()
function gaugeMouseDown(args) {}
Mouse Leave Event Not Applicable Event: gaugeMouseLeave

@Html.EJS().LinearGauge("container")
.GaugeMouseLeave("gaugeMouseLeave").Render()
function gaugeMouseLeave(args) {}
Mouse Click Event Event: mouseClick

@Html.EJ().CircularGauge("container")
.MouseClick("mouseClick")
function mouseClick(args) {}		 Not Applicable
Render Complete Event Event: renderComplete

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

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

@Html.EJ().CircularGauge("container")
.RightClick("rightClick")
function rightClick(args) {}		 Not Applicable
BarPointers Event Event: drawBarPointers

@Html.EJ().CircularGauge("container")
.DrawBarPointers("drawBarPointers")
function drawBarPointers(args) {}		 Not Applicable
Indicators Event Event: drawIndicators

@Html.EJ().CircularGauge("container")
.DrawIndicators("drawIndicators")
function drawIndicators(args) {}		 Not Applicable
MarkerPointer Event Event: drawMarkerPointers

@Html.EJ().CircularGauge("container")
.DrawMarkerPointers("drawMarkerPointers")
function drawMarkerPointers(args) {}		 Not Applicable
Ranges Event Event: drawRange

@Html.EJ().CircularGauge("container")
.DrawRange("drawRange")
function drawRange(args) {}		 Not Applicable
Gauge Initialized Event Event: init

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