Ej1 api migration in Angular Linear gauge component

4 Apr 202324 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

<ej-lineargauge height="150"> </ej-lineargauge> 		Property: height

<ejs-lineargauge height="150px"></ejs-lineargauge>
Width Property: width

<ejs-lineargauge width="200"></ej-lineargauge> 		Property: width

<ej-lineargauge width="200px"></ejs-lineargauge>
Height(In Percentage) Not Applicable Property: height

<ejs-lineargauge height='70%'> </ejs-lineargauge>
Width(In Percentage) Not Applicable Property: width

<ejs-lineargauge width='100%'> </ejs-lineargauge>

Line customizaton

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

<ej-lineargauge><e-scales><e-scale length 300> </e-scale> </e-scales> </ej-lineargauge> 		Property: axes.line.height

<ejs-lineargauge><e-axes><e-axis [line]='Line'></e-axis></e-axes> </ejs-lineargauge>

public Line:Object = { height: "150"}
Width Property: scales.width

<ej-lineargauge><e-scales><e-scale width ="300"></e-scale></e-scales> </ej-lineargauge> 		Property: axes.line.width

<ejs-lineargauge><e-axes><e-axis [line]='Line'></e-axis></e-axes> </ejs-lineargauge>

public Line:Object = { width: 150}
Color Property: scales.backgroundcolor

<ej-lineargauge><e-scales><e-scale backgroundColor="red"></e-scale></e-scales> </ej-lineargauge> 		Property: axes.line.color

<ejs-lineargauge><e-axes><e-axis [line]='Line'></e-axis></e-axes> </ejs-lineargauge>

public Line:Object = { color:"red"}
Offset Not Applicable Property: axes.line.offset

<ejs-lineargauge><e-axes><e-axis [line]='Line'></e-axis></e-axes> </ejs-lineargauge>

public Line:Object = { offset : 2}
Opacity Property: scales.opacity

<ej-lineargauge><e-scales><e-scale opacity= "0.2" ></e-scale></e-scales> </ej-lineargauge> 		Not Applicable
DashArray Not Applicable Property: axes.line.dashArray

<ejs-lineargauge><e-axes><e-axis [line]='Line'></e-axis></e-axes> </ejs-lineargauge>

public Line:Object = { dashArray : '1'}

Ticks

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

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.height

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>
</br>public majorTicks: Object= { }
Height of Major Ticks Property: scales.ticks.height

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" height= "8"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.height

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>

public majorTicks: Object= { height: 8 }
Width of Major Ticks Property: scales.ticks.width

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" width= "5"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.width

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>

public majorTicks: Object= { width: 5 }
Color of Major Ticks Property: scales.ticks.color

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" color='blue'></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.color

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>

public majorTicks: Object= { color:'blue' }
Offset for Major Ticks Property: scales.ticks.distanceFromScale

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" [distanceFromScale]="{ x: 5, y: 5 }"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.offset

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>

public majorTicks: Object= { offset : 1 }
Interval of Major Ticks Property: scales.majorIntervalValue

<ej-lineargauge><e-scales><e-scale majorIntervalValue= "15"></e-scale></e-scales> </ej-lineargauge> 		Property: axes.majorTicks.interval

<ejs-lineargauge><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-lineargauge>

public majorTicks: Object= { interval : 15 }
Angle of Major Ticks Property: scales.ticks.angle

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" angle= "30"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Not Applicable
Opcity of Major Ticks Property: scales.ticks.opacity

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="majorinterval" opacity= "0.5"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Not Applicable
Height of Minor Ticks Property: scales.ticks.height

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" height= "8"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.minorTicks.height

<ejs-lineargauge><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-lineargauge>

public minorTicks: Object= { height: 8 }
Width of Minor Ticks Property: scales.ticks.width

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" width= "5"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.minorTicks.width

<ejs-lineargauge><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-lineargauge>

public minorTicks: Object= { width: 5 }
Color of Minor Ticks Property: scales.ticks.color

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" color='blue'></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Property: axes.minorTicks.color

<ejs-lineargauge><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-lineargauge>

public minorTicks: Object= { color:'blue' }
Offset for Major Ticks Property: scales.ticks.distanceFromScale

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" [distanceFromScale]="distanceFromScale"></e-tick></e-ticks></e-scale></e-scales></ej-lineargauge>

public distanceFromScale: Object= { x: 5, y: 5 } 		Property: axes.minorTicks.offset

<ejs-lineargauge><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-lineargauge>

public minorTicks: Object= { offset : 1 }
Interval of Minor Ticks Property: scales.majorIntervalValue

<ej-lineargauge><e-scales><e-scale minorIntervalValue= "15"></e-scale></e-scales> </ej-lineargauge> 		Property: axes.minorTicks.interval

<ejs-lineargauge><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-lineargauge>

public minorTicks: Object= { interval : 15 }
Angle of Minor Ticks Property: scales.ticks.angle

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" angle= "30"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Not Applicable
Opcity of Minor Ticks Property: scales.ticks.opacity

<ej-lineargauge><e-scales><e-scale><e-ticks><e-tick type="minorinterval" opacity= "0.5"></e-tick></e-ticks></e-scale></e-scales> </ej-lineargauge> 		Not Applicable

Labels

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

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ angle: 10}] 		Not Applicable
Offset Property: scales.labels.distanceFromScale

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ distanceFromScale: { x: 0, y: 60 } }] 		Property: axes.labelStyle.offset

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { offset : 3 }
Format Property: scales.labels.unitText

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ unitText: "F"}] 		Property: axes.labelStyle.format

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { format: 'c' }
Unit Text Placement Property: scales.labels.unitTextPlacement

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ unitTextPlacement: "front"}] 		Not Applicable
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { useRangeColor: true }
Opacity Property: scales.labels.opacity

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{opacity: 0.5}] 		Property: axes.labelStyle.font.opacity

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font: { opacity: 5 } }
Label Text Color Property: scales.labels.textColor

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ textColor: "Red",}] 		Property: axes.labelStyle.font.color

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font:{ color: 'red' } }
Label Font Family Property: scales.labels.font.fontFamily

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{font:{ fontFamily: 'Arial' }}] 		Property: axes.labelStyle.font.fontFamily

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font:{ fontFamily: 'Arial' } }
Label Font Style Property: scales.labels.font.fontStyle

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{ font: { fontStyle: 'Bold' }}] 		Property: axes.labelStyle.font.fontStyle

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font: { fontStyle: 'Bold' } }
Label Size Property: scales.labels.font.size

<ej-lineargauge><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-lineargauge>

public labels:Object = [{font:{ size: "15px" } }] 		Property: axes.labelStyle.font.size

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font:{ size: "15px" } }
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

<ejs-lineargauge><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-lineargauge>

public labelStyle: Object= { font:{ fontWeight: '4' } }

Axis

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

<ej-lineargauge><e-scales><e-scale minimum="10"></e-scale></e-scales> </ej-lineargauge> 		Property: axes.minimum

<ejs-lineargauge><e-axes><e-axis minimum="10"></e-axis></e-axes> </ejs-lineargauge>
Maximum Value Property: scales.maximum

<ej-lineargauge><e-scales><e-scale ></e-scale maximum="200"></e-scales> </ej-lineargauge> 		Property: axes.maximum

<ejs-lineargauge><e-axes><e-axis maximum="200"></e-axis></e-axes> </ejs-lineargauge>
Inverted Position Not Applicable Property: axes.isInversed

<ejs-lineargauge><e-axes><e-axis [isInversed]='Direction' ></e-axis></e-axes> </ejs-lineargauge>
Opposed Position Not Applicable Property: axes.opposedPosition

<ejs-lineargauge><e-axes><e-axis [opposedPosition]='position'></e-axis></e-axes> </ejs-lineargauge>

Ranges

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

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range startValue="20"></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.start

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range start= "20" ></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
End Value Property: scales.ranges.endValue

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range endValue= "20" ></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.end

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range end= "20"></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
Start Width Property: scales.ranges.startWidth

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range startWidth= "10" ></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.startWidth

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range startWidth= "10"></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
End Width Property: scales.ranges.endWidth

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range endWidth= "15"></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.endWidth

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range endWidth= "15"></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
Color Property: scales.ranges.backgroundColor

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range backgroundColor= "red" ></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.color

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range color= "red"></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
Offset Property: scales.ranges.distanceFromScale

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range distanceFromScale= "10" ></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.offset

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range offset= "10" ></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
Range Position Property: scales.ranges.placement

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range placement: "Near"></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Property: axes.ranges.position

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range position= 'Inside' ></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>
Opacity Property: scales.ranges.opacity

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range opacity: "0.3"></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge> 		Not Applicable
Border Customization Property: scales.ranges.border

<ej-lineargauge><e-scales><e-scale><e-ranges><e-range [border]="border"></<e-range></e-ranges></e-scale></e-scales> </ej-lineargauge>

public border: Object= { color: "blue", width: 2 } 		Property: axes.ranges.border

<ejs-lineargauge><e-axes><e-axis >><e-ranges><e-range [border]="border"></<e-range></e-ranges></e-axis></e-axes> </ejs-lineargauge>

public border: Object= { color: "blue", width: 2 }

Bar Pointer

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

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value="20" ></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.value

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type: "Bar", value="20" ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Color of Bar Pointer Property: scales.ranges.barPointers.backgroundColor

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value= "20", backgroundColor="red"></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.color

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value= "20" color='red'></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Offset of Bar Pointer Property: scales.ranges.barPointers.distanceFromScale

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value="40" distanceFromScale="20" ></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.offset

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value="20" offset="20"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Opacity of Bar Pointer Property: scales.ranges.barPointers.opacity

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value="40" opacity="0.5"></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.opacity

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value="20" opacity="0.5"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Width of Bar Pointer Property: scales.ranges.barPointers.width

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value= "40" width="25" ></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.width

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value="20" width="25"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Gradients of Bar Pointer Property: scales.ranges.barPointers.gradients

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer value= "40" gradients="gradients:"></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge>

public gradients: Object ={colorInfo:[{ colorStop : 0, color:"#FFFFFF"}]} 		Not Applicable
Border of Bar Pointer Property: scales.ranges.barPointers.border

<ej-lineargauge><e-scales><e-scale><e-barpointers><e-barpointer border="border"></e-barpointer></e-barpointers></e-scale></e-scales> </ej-lineargauge>

public border: Object= { color: "red", width: 2 } 		Property: axes.pointers.border

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer border="border" ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>

public border : Object={ color: 'red', width: 2.5 }
Animation of Bar Pointer Property: enableAnimation

<ej-lineargauge enableAnimation="true" > </ej-lineargauge> 		Property: axes.pointers.animationDuration

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value="20" animationDuration="2500"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Rounded Corner of Bar Pointer Not Applicable Property: axes.pointers.roundedCornerRadius

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Bar' value="20" roundedCornerRadius="15"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>

Marker Pointer

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

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value="20" ></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.value

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type: "marker", value="20" ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Color of marker Pointer Property: scales.ranges.markerPointers.backgroundColor

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value= "20" backgroundColor="red"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.color

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value= "20" color='red'></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Offset of marker Pointer Property: scales.ranges.markerPointers.distanceFromScale

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value="40", distanceFromScale="20" ></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.offset

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" offset="20"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Opacity of marker Pointer Property: scales.ranges.markerPointers.opacity

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value="40" opacity="0.5"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.opacity

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" opacity="0.5"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Width of marker Pointer Property: scales.ranges.markerPointers.width

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value= "40" width="25" ></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.width

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" width="25"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Gradients of marker Pointer Property: scales.ranges.markerPointers.gradients

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value= "40" gradients="gradients:"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge>

public gradients: Object ={colorInfo:[{ colorStop : 0, color:"#FFFFFF"}]} 		Not Applicable
Border of marker Pointer Property: scales.ranges.markerPointers.border

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer border="border"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge>

public border: Object= { color: "red", width: 2 } 		Property: axes.pointers.border

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer border="border" ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>

public border : Object={ color: 'red', width: 2.5 }
Animation of marker Pointer Property: enableAnimation

<ej-lineargauge enableAnimation="true" > </ej-lineargauge> 		Property: axes.pointers.animationDuration

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" animationDuration="2500"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Type of Marker Pointer Property: scales.ranges.markerPointers.type

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value="40" type= "Diamond"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.markerType

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" markerType='Diamond'></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Placement of Marker Pointer Property: scales.ranges.markerPointers.placement

<ej-lineargauge><e-scales><e-scale><e-markerpointers><e-markerpointer value="40" placement="Near"></e-markerpointer></e-markerpointers></e-scale></e-scales> </ej-lineargauge> 		Property: axes.pointers.placement

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" placement= 'Center' ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Drag of Marker Pointer Property: readOnly

<ej-lineargauge readOnly= "false"> </ej-lineargauge> 		Property: axes.pointers.enableDrag

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" enableDrag="true"></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>
Image Marker Pointer Not Applicable Property: axes.pointers.imageUrl

<ejs-lineargauge><e-axes><e-axis ><e-pointers><e-pointer type= 'Marker' value="20" imageUrl= './image.png' ></e-pointer></e-pointers></e-axis></e-axes> </ejs-lineargauge>

Annotation

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

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{value: "LinearGauge"}] 		Property: annotations.content

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation"}]
Horizontal Alignment Not Applicable Property: annotations.horizontalAlignment

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", horizontalAlignment: 'Center' }]
Vertical Alignment Not Applicable Property: annotations.verticalAlignment

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{content: "Annotation", verticalAlignment: 'Far' }]
Position of X Property: scales.customLabels.position.x

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{ value: "LinearGauge", position: { x: 20 }}] 		Property: annotations.x

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", x: 35}]
Position of Y Property: scales.customLabels.position.y

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{value: "LinearGauge", position: { y: 30 }}] 		Property: annotations.y

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", y: 40 }]
Z Index Not Applicable Property: annotations.zIndex

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{content: "Annotation", zIndex: 1 } }]
Axis Index Not Applicable Property: annotations.axisIndex

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", axisIndex: 0 }]
Axis Value Not Applicable Property: annotations.axisValue

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", axisValue: 35 }]
Font customization Property: scales.customLabels.font

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{value: "LinearGauge", font: { size: "30px" }}] 		Property: annotations.font

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", font: { size: '15px' } }]
Annotation Color Property: scales.customLabels.color

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{ value: "LinearGauge", color: "yellow"}] 		Property: annotations.font

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", font: { color: 'red' } }]
Opacity of Annotation Property: scales.customLabels.opacity

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{value: "LinearGauge", opacity: 0.5}] 		Property: annotations.font

<ejs-lineargauge [annotations]='annotation'></ejs-lineargauge>

public annotation:Object[]=[{ content: "Annotation", font: { opacity: 0.7 }}]
Position Type Property: scales.customLabels.positionType

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object=[{value: "LinearGauge", positionType: "outer"}] 		Not applicable
TextAngle of Annotation Property: scales.customLabels.textAngle

<ej-lineargauge><e-scales><e-scale [showCustomLabels]="true" [customLabels]="customLabels"></e-scale></e-scales> </ej-lineargauge>

public customLabels: Object[]=[{value: "LinearGauge", textAngle: 25 }] 		Not applicable

Tooltip

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

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={enable: true}
Tooltip for Label Property: tooltip.showLabelTooltip

<ej-lineargauge [tooltip]="tooltip"></ej-lineargauge>

public tooltip:Object={ showLabelTooltip: true } 		Not Applicable
Tooltip Format Not Applicable Property: tooltip.format

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object=[{}]
Tooltip Color Not Applicable Property: tooltip.fill

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={ enable: true, fill: 'gray'}
Tooltip Template Property: tooltip.templateID

<ej-lineargauge [tooltip]="tooltip"></ej-lineargauge>

public tooltip:Object={showLabelTooltip: true, showCustomLabelTooltip: true, templateID: 'Tooltip'} 		Property: tooltip.template

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={enable: true, template: 'Template'}
Tooltip Animation Not Applicable Property: tooltip.enableAnimation

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={enable: true, enableAnimation: true}
Tooltip Border Not Applicable Property: tooltip.border

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={enable: true, border: { width: 2, color: 'red' } }
Tooltip TextStyle Not Applicable Property: tooltip.textStyle

<ejs-lineargauge [tooltip]='Tooltip'> </ejs-lineargauge>

public Tooltip: Object={enable: true, textStyle: { color: 'white', size: '10px' } }

Appearence of Linear Gauge

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

<ej-lineargauge backgroundColor= "Red"> </ej-lineargauge> 		Property: background

<ejs-lineargauge background= 'skyblue' ></ejs-lineargauge>
Border Color Property: borderColor

<ej-lineargauge borderColor= "Black" > </ej-lineargauge> 		Property: border.color

<ejs-lineargauge [border]="border"></ejs-lineargauge>

public border: Object={color: 'red'}
Margin Not Applicable Property: margin

<ejs-lineargauge [margin]="margin"></ejs-lineargauge>

public margin: Object={eft: 40, right: 40, top: 40, bottom: 40}
Orientation Property: orientation

<ej-lineargauge orientation= "Vertical"> </ej-lineargauge> 		Property: orientation

<ejs-lineargauge orientation= 'Horizontal'></ejs-lineargauge>
Locale Property: locale

<ej-lineargauge locale= "en-US"> </ej-lineargauge> 		Property: locale

<ejs-lineargauge locale= 'en-US' ></ejs-lineargauge>
Theme Property: theme

<ej-lineargauge theme= 'Highcontrast' > </ej-lineargauge> 		Property: theme

<ejs-lineargauge theme= 'Highcontrast' ></ejs-lineargauge>
Gauge Title Not Applicable Property: title

<ejs-lineargauge title= 'Linear Gauge'></ejs-lineargauge>

Gauge Container type

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

<ej-lineargauge > <e-scales><e-scale type= 'thermometer'> </e-scales></e-scale> </ej-lineargauge> 		Property: container.type

<ejs-lineargauge [container]='Container'></ejs-lineargauge>

public Container: Object={type: 'Thermometer'}
Container Height Not Applicable Property: container.height

<ejs-lineargauge [container]='Container'></ejs-lineargauge>

public Container: Object={height: 20}
Container Width Not Applicable Property: container.width

<ejs-lineargauge [container]='Container'></ejs-lineargauge>

public Container: Object={ width: 10}
Container Offset Not Applicable Property: container.offset

<ejs-lineargauge [container]='Container'></ejs-lineargauge>

public Container: Object={ offset: 5}

Events

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

<ejs-lineargauge (animationComplete)='animationComplete($event)'> </ejs-lineargauge>

public animationComplete(args: IAnimationCompleteEventArgs)=>{}
Annotation Render Event Event: drawCustomLabel

<ej-lineargauge (drawCustomLabel)='DrawCustomLabel($event)'> </ej-lineargauge>

DrawCustomLabel(sender){} 		Event: annotationRender

<ejs-lineargauge (load)='load($event)'> </ejs-lineargauge>

public load(args: ILoadedEventArgs)=>{}
AxisLabel Render Event Event: drawLabels

<ej-lineargauge (drawLabels)='drawLabels($event)'> </ej-lineargauge>

drawLabels(sender){} 		Event: axisLabelRender

<ejs-lineargauge ( axisLabelRender)=' axisLabelRender($event)'> </ejs-lineargauge>

public axisLabelRender(args: IAxisLabelRenderEventArgs)=>{}
Load Event Event: load

<ej-lineargauge (load)='load($event)'> </ej-lineargauge>

DrawRange(sender){} 		Event: load

<ejs-lineargauge (load)=' load($event)'> </ejs-lineargauge>

public load(args: ILoadEventArgs)=>{}
Loaded Event Not Applicable Event: loaded

<ejs-lineargauge (loaded)=' loaded($event)'> </ejs-lineargauge>

public loaded(args: ILoadedEventArgs)=>{}
Resize Event Not Applicable Event: resized

<ejs-lineargauge (resized)=' resized($event)'> </ejs-lineargauge>

public resized(args: IResizeEventArgs)=>{}
Tooltip Render Event Not Applicable Event: tooltipRender

<ejs-lineargauge ( tooltipRender)=' tooltipRender($event)'> </ejs-lineargauge>

public tooltipRender(args: ITooltipRenderEventArgs)=>{}
Value Change Event Not Applicable Event: valueChange

<ejs-lineargauge (valueChange)=' valueChange($event)'> </ejs-lineargauge>

public axisLabelRender(args: IValueChangeEventArgs)=>{}
Mouse Move Event Event: mouseClickMove

<ej-lineargauge (mouseClickMove=' MouseClickMove($event)'> </ej-lineargauge>

MouseClickMove(sender){} 		Event: gaugeMouseMove

<ejs-lineargauge (gaugeMouseMove)=' gaugeMouseMove($event)'> </ejs-lineargauge>

public gaugeMouseMove(args: IMouseEventArgs)=>{}
Mouse Up Event Event: mouseClickUp

<ej-lineargauge (mouseClick)='MouseClick($event)'> </ej-lineargauge>

MouseClick(sender){} 		Event: gaugeMouseUp

<ejs-lineargauge (gaugeMouseUp)=' gaugeMouseUp($event)'> </ejs-lineargauge>

public gaugeMouseUp(args: IMouseEventArgs)=>{}
Mouse Down Event Not Applicable Event: gaugeMouseDown

<ejs-lineargauge ( gaugeMouseDown)=' gaugeMouseDown($event)'> </ejs-lineargauge>

public gaugeMouseDown(args: IMouseEventArgs)=>{}
Mouse Leave Event Not Applicable Event: gaugeMouseLeave

<ejs-lineargauge ( gaugeMouseLeave)=' gaugeMouseLeave($event)'> </ejs-lineargauge>

public gaugeMouseLeave(args: IMouseEventArgs)=>{}
Mouse Click Event Event: mouseClick

<ej-lineargauge (mouseClick)='MouseClick($event)'> </ej-lineargauge>

MouseClick(sender){} 		Not Applicable
Render Complete Event Event: renderComplete

<ej-lineargauge ( renderComplete)=' RenderComplete($event)'> </ej-lineargauge>

RenderComplete(sender){} 		Not Applicable
Double Click Event Event: doubleClick

<ej-lineargauge (doubleClick)='DoubleClick($event)'> </ej-lineargauge>

DoubleClick(sender){} 		Not Applicable
Right Click Event Event: rightClick

<ej-lineargauge (rightClick)='RightClick($event)'> </ej-lineargauge>

RightClick(sender){} 		Not Applicable
BarPointers Event Event: drawBarPointers

<ej-lineargauge (drawBarPointers)='DrawBarPointers($event)'> </ej-lineargauge>

DrawBarPointers(sender){} 		Not Applicable
Indicators Event Event: drawIndicators

<ej-lineargauge (drawIndicators)='DrawIndicators($event)'> </ej-lineargauge>

DrawIndicators(sender){} 		Not Applicable
MarkerPointer Event Event: drawMarkerPointers

<ej-lineargauge (drawMarkerPointers)='DrawMarkerPointers($event)'> </ej-lineargauge>

DrawMarkerPointers(sender){} 		Not Applicable
Ranges Event Event: drawRange

<ej-lineargauge (drawRange)='DrawRange($event)'> </ej-lineargauge>

DrawRange(sender){} 		Not Applicable
Gauge Initialized Event Event: init

<ej-lineargauge (load)='load($event)'> </ej-lineargauge>

DrawRange(sender){} 		Not Applicable