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<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> |
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'} |
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> 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 |
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' } } |
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> |
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 } |
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> |
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> |
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 |
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' } } |
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> |
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} |
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 |