Contents
- Linear gauge dimensions
- Line customizaton
- Ticks
- Labels
- Axis
- Ranges
- Bar Pointer
- Marker Pointer
- Annotation
- Tooltip
- Appearence of Linear Gauge
- Gauge Container type
- Events
Having trouble getting help?
Contact Support
Contact Support
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 |