This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
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() |
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() |
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 |
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' }; |
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() |
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"}; |
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() |
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() |
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 |
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() |
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() |
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() |
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 |