Ej1 api migration in React Linear gauge component

24 Jan 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

ReactDOM.render( <EJ.LinearGauge id= "gauge" height= '100px'> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: height

ReactDOM.render( <LinearGaugeComponent id='gauge' height= '100px'> </LinearGaugeComponent>, document.getElementById('gauge'));
Width Property: width

ReactDOM.render( <EJ.LinearGauge id= "gauge" width= '200px'> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: width

ReactDOM.render( <LinearGaugeComponent id='gauge' width= '200px'> </LinearGaugeComponent>, document.getElementById('gauge'));
Height(In Percentage) Not Applicable Property: height

ReactDOM.render( <LinearGaugeComponent id='gauge' height= '70%'> </LinearGaugeComponent>, document.getElementById('gauge'));
Width(In Percentage) Not Applicable Property: width

ReactDOM.render( <LinearGaugeComponent id='gauge' width= '80%'> </LinearGaugeComponent>, document.getElementById('gauge'));

Line customization

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

var scale = [{ length: 300 }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.line.height

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective line= {height= '150'}/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Width Property: scales.width

var scale = [{ width: 300 }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.line.width

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective line= {width= 2}/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color Property: scales.backgroundColor

var scale = [{ backgroundColor: "blue" }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.line.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective line= {color= '#4286f4'}/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset Not Applicable Property: axes.line.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective line= {offset= 2}/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opacity Property: scales.opacity

var scale = [{ opacity: 0.2 }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
DashArray Not Applicable Property: axes.line.dashArray

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective line= {dashArray= 1}/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Ticks

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

var scale = [{
  ticks: [{ type: "majorinterval" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.height

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Height of Major Ticks Property: scales.ticks.height

var scale = [{
  ticks: [{ type: "majorinterval", height:8 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.height

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { height: 10 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Width of Major Ticks Property: scales.ticks.width

var scale = [{
  ticks: [{ type: "majorinterval", width: 5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.width

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { width: 2 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color of Major Ticks Property: scales.ticks.color

var scale = [{
  ticks: [{ color: "blue" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { color: "Blue" }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset for Major Ticks Property: scales.ticks.distanceFromScale

var scale = [{
  ticks: [{ distanceFromScale: {x: 5, y: 5} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { offset: 1 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Interval of Major Ticks Property: scales.majorIntervalValue

var scale = [{
  majorIntervalValue: 15
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.majorTicks.interval

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective majorTicks= { interval: 20 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Angle of Major Ticks Property: scales.ticks.angle

var scale = [{
  ticks: [{ angle: 30 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Opcity of Major Ticks Property: scales.ticks.opacity

var scale = [{
  ticks: [{ opacity: 0.5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Height of Minor Ticks Property: scales.ticks.height

var scale = [{
  ticks: [{ type: "minorinterval", height:8 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minorTicks.height

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minorTicks= { height: 10 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Width of Minor Ticks Property: scales.ticks.width

var scale = [{
  ticks: [{ type: "minorinterval", width: 5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minorTicks.width

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minorTicks= { width: 2 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color of Minor Ticks Property: scales.ticks.color

var scale = [{
  ticks: [{ type: "minorinterval",
  color: "blue" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minorTicks.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minorTicks= { color: "Blue" }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset for Minor Ticks Property: scales.ticks.distanceFromScale

var scale = [{
  ticks: [{ type: "minorinterval",
  distanceFromScale: {x: 5, y: 5} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minorTicks.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minorTicks= { offset: 1 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Interval of Minor Ticks Property: scales.minorIntervalValue

var scale = [{
  minorIntervalValue: 8
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minorTicks.interval

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minorTicks= { interval: 5 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Angle of Minor Ticks Property: scales.ticks.angle

var scale = [{
  ticks: [{ type: "minorinterval",
  angle: 30 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Opcity of Minor Ticks Property: scales.ticks.opacity

var scale = [{
  ticks: [{ type: "minorinterval",
  opacity: 0.5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable

Labels

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

var scale = [{
  labels: [{ angle: 15 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Offset Property: scales.labels.distanceFromScale

var scale = [{
  labels: [{distanceFromScale:{x: -5, y: 10} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { offset: 3 }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Format Property: scales.labels.unitText

var scale = [{
  labels: [{ unitText: "F" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.format

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { format: 'c' }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Unit Text Placement Property: scales.labels.unitTextPlacement

var scale = [{
  labels: [{ unitTextPlacement: "front" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { useRangeColor: true }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opacity Property: scales.labels.opacity

Property: scales.labels.unitTextPlacement

var scale = [{
  labels: [{ opacity: 0.5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.font.opacity

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: { opacity: 0.5 } }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Label Text Color Property: scales.labels.textColor

var scale = [{
  labels: [{ textColor: "red" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.font.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: { color: "red" } }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Label Font Family Property: scales.labels.font.fontFamily

var scale = [{
  labels: [{font:{fontFamily:"Segoe UI"}]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.font.fontFamily

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: {fontFamily:"Segoe UI"} }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Label Font Style Property: scales.labels.font.fontStyle

var scale = [{
  labels: [{ font:{fontStyle:"Bold"} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.font.fontStyle

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: { fontStyle: "Bold"} }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Label Size Property: scales.labels.font.size

var scale = [{
  labels: [{ font: { size: "20px"} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.labelStyle.font.size

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: { size: "15px"} }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective labelStyle= { font: { fontWeight: '4'} }/> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Axis

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

var scale = [{ minimum: 20 }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.minimum

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective minimum= 20 /> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Maximum Value Property: scales.maximum

var scale = [{ maximum: 120 }]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.maximum

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective maximum= 120 /> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Inverted Position Not Applicable Property: axes.isInversed

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective isInversed= true /> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opposed Position Not Applicable Property: axes.opposedPosition

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <AxisDirective opposedPosition= true /> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Ranges

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

var scale = [{
  ranges: [{ startValue: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.start

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective start={20} /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
End Value Property: scales.ranges.endValue

var scale = [{
  ranges: [{ endValue: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.end

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective end={20} /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Start Width Property: scales.ranges.startWidth

var scale = [{
  ranges: [{ startWidth: 10 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.startWidth

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective startWidth={20} /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
End Width Property: scales.ranges.endWidth

var scale = [{
  ranges: [{ endWidth: 15 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.endWidth

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective endWidth={15} /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color Property: scales.ranges.backgroundColor

var scale = [{
  ranges: [{ backgroundColor: "red" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective color="red" /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset Property: scales.ranges

var scale = [{
  ranges: [{ distanceFromScale: {10} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective offset= 5 /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Range Position Property: scales.ranges.placement

var scale = [{
  ranges: [{ placement: "Near" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.position

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective position= "Inside" /> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opacity Property: scales.ranges.opacity

var scale = [{
  ranges: [{ opacity: {0.3} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Border Customization Property: scales.ranges.border

var scale = [{
  ranges: [{ border: { color: 'green',
  width: 2} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.ranges.border

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <RangesDirective>
<RangeDirective border= {color: 'blue', width: 2}/> </RangesDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Bar Pointer

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

var scale = [{
  barPointers: [{ value: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.value

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar', value= {20} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color of Bar Pointer Property: scales.barPointers.backgroundColor

var scale = [{
  barPointers: [{ value: 20,
    backgroundColor: "red" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar',value= {20},color= 'red' /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset of Bar Pointer Property: scales.barPointers.distanceFromScale

var scale = [{
  barPointers: [{ distanceFromScale: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar',value= {20},offset= {20} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opacity of Bar Pointer Property: scales.barPointers.opacity

var scale = [{
  barPointers: [{ value: 40, opacity: 0.5 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.opacity

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar',value= {20},opacity= {0.5} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Width of Bar Pointer Property: scales.barPointers.width

var scale = [{
  barPointers: [{ value: 40, width: 25 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.width

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar',value= {20},width= {25} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Gradients of Bar Pointer Property: scales.barPointers.gradients

var scale = [{
  barPointers: [{ value: 40, gradients: {
  colorInfo:[{ colorStop : 0,
  color:"#FFFFFF"}] } }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Border of Bar Pointer Property: scales.barPointers.border

var scale = [{
  barPointers: [{ value: 40,
  border: { color: "red", width: 2 } }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.border

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar', value= {20}, border={ color: 'red', width: 2.5 } /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Animation of Bar Pointer Property: enableAnimation

ReactDOM.render( <EJ.LinearGauge id= "gauge" enableAnimation= true> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.animationDuration

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar',value= {20}, animationDuration= {2500} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Rounded Corner of Bar Pointer Not Applicable Property: axes.pointers.roundedCornerRadius

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Bar', value= {20}, roundedCornerRadius= {15} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Marker Pointer

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

var scale = [{
  markerPointers: [{ value: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.value

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Color of Marker Pointer Property: scales.markerPointers.backgroundColor

var scale = [{
  markerPointers: [{
  value: 20, backgroundColor: "blue" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.color

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, color= 'red' /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Offset of Marker Pointer Property: scales.markerPointers.distanceFromScale

var scale = [{
  markerPointers: [{
  value: 40, distanceFromScale: 10 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, offset= {10} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Opacity of Marker Pointer Property: scales.markerPointers.opacity

var scale = [{
  markerPointers: [{
  value: 40, opacity: 1 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.opacity

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, opacity= {1} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Width of Marker Pointer Property: scales.markerPointers.width

var scale = [{
  markerPointers: [{
  value: 40, width: 20 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.width

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, width= {25} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Gradients of Marker Pointer Property: scales.markerPointers.gradients

var scale = [{
  markerPointers: [{ value: 40,gradients:{
  colorInfo:[{ colorStop : 0,
  color:"#FFFFFF"}] } }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Not Applicable
Border of Bar Pointer Property: scales.markerPointers.border

var scale = [{
  markerPointers: [{ value: 40,
  border: { color: "red", width: 2 } }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.border

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, border={ color: 'red', width: 2.5 } /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Animation of Marker Pointer Property: enableMarkerPointerAnimation

ReactDOM.render( <EJ.LinearGauge id= "gauge" enableMarkerPointerAnimation= true> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.animationDuration

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker',value= {20}, animationDuration= {2500} /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Type of Marker Pointer Property: scales.markerPointers.type

var scale = [{
  markerPointers: [{ value: 40,
  type: "Diamond" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.markerType

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, markerType= 'Diamond' /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Placement of Marker Pointer Property: scales.markerPointers.placement

var scale = [{
  markerPointers: [{ value: 40,
  placement: "near" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge" scales={scale}> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.placement

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, placement= "Center" /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Drag of Marker Pointer Property: readOnly

ReactDOM.render( <EJ.LinearGauge id= "gauge" readOnly= false> </EJ.LinearGauge>, document.getElementById('gauge')); 		Property: axes.pointers.enableDrag

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, enableDrag= true /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));
Image Marker Pointer Not Applicable Property: axes.pointers.imageUrl

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AxesDirective> <PointersDirective>
<PointerDirective type= 'Marker', value= {20}, imageUrl= "image.png" /> </PointersDirective> </AxesDirective> </LinearGaugeComponent>, document.getElementById('gauge'));

Annotation

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

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge' }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.content

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= "Annotation"/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Horizontal Alignment Not Applicable Property: annotations.horizontalAlignment

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  horizontalAlignment='Center'/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Vertical Alignment Not Applicable Property: annotations.verticalAlignment

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  verticalAlignment='Far'/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Position of X Property: scales.customLabels.position.x

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge',position: {x: 20} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.x

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  x={35}/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Position of Y Property: scales.customLabels.position.y

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge',position: {y: 30} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.y

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  y={40}/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Z Index Not Applicable Property: annotations.zIndex

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  zIndex='1'/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Axis Index Not Applicable Property: annotations.axisIndex

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= 'Annotation' axisIndex='0'/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Axis Value Not Applicable Property: annotations.axisValue

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= 'Annotation' axisValue='35'/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Font customization Property: scales.customLabels.font

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge', font: { size: '30px'} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.font

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= 'Annotation' font= { size: '15px' }/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Annotation Color Property: scales.customLabels.color

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge', font: { color: 'red'} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.font

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= 'Annotation' font= { color: 'red' }/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Opacity of Annotation Property: scales.customLabels.opacity

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge', font: { opacity: 0.5} }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: annotations.font

ReactDOM.render( <LinearGaugeComponent id='gauge'>
<AnnotationsDirective> <AnnotationDirective
  content= 'Annotation' font= { opacity: 0.7 }/>
</AnnotationsDirective> </LinearGaugeComponent>,
document.getElementById('gauge'));
Position Type Property: scales.customLabels.positionType

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge', positionType: "outer" }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Not applicable
TextAngle of Annotation Property: scales.customLabels.textAngle

var scale = [{
  customLabels: [{ showCustomLabels: true,
  value: 'LinearGauge', textAngle: 25 }]
}]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Not applicable

Tooltip

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

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true} />
document.getElementById('gauge'));
Tooltip for Label Property: tooltip.showLabelTooltip

var tooltip = [{
  showLabelTooltip: true }]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  tooltip={tooltip}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Not Applicable
Tooltip Format Not Applicable Property: tooltip.format

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true, format: '${value}'} />
document.getElementById('gauge'));
Tooltip Color Not Applicable Property: tooltip.fill

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true, fill: 'gray'} />
document.getElementById('gauge'));
Tooltip Template Property: tooltip.templateID

var tooltip = [{
  templateID: true }]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  tooltip={tooltip}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: tooltip.template

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true, template: 'Template'} />
document.getElementById('gauge'));
Tooltip Animation Not Applicable Property: tooltip.enableAnimation

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enableAnimation: true } />
document.getElementById('gauge'));
Tooltip Border Not Applicable Property: tooltip.border

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true,
    border: { width: 2, color: 'red' } } />
document.getElementById('gauge'));
Tooltip TextStyle Not Applicable Property: tooltip.textStyle

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltip= { enable: true,
    textStyle: { size: '10px', color: 'white' } } />
document.getElementById('gauge'));

Appearence of Linear Gauge

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

ReactDOM.render( <EJ.LinearGauge
  id= "gauge" backgroundColor= 'red'>
</EJ.LinearGauge>, document.getElementById('gauge')); 		Property: background

ReactDOM.render( <LinearGaugeComponent id='gauge'
 background= 'blue'/>
document.getElementById('gauge'));
Border Color Property: borderColor

ReactDOM.render( <EJ.LinearGauge
  id= "gauge" borderColor= 'Black'>
</EJ.LinearGauge>, document.getElementById('gauge')); 		Property: border.color

ReactDOM.render( <LinearGaugeComponent id='gauge'
  border= { color: 'red' } />
document.getElementById('gauge'));
Margin Not Applicable Property: margin

ReactDOM.render( <LinearGaugeComponent id='gauge'
  margin= { left: 40, right: 40, top: 40, bottom: 40 }/>
document.getElementById('gauge'));
Orientation Property: orientation

ReactDOM.render( <EJ.LinearGauge
  id= "gauge" orientation= 'Vertical'>
</EJ.LinearGauge>, document.getElementById('gauge')); 		Property: orientation

ReactDOM.render( <LinearGaugeComponent id='gauge'
  orientation= 'Horizontal'/>
document.getElementById('gauge'));
Locale Property: locale

ReactDOM.render( <EJ.LinearGauge
  id= "gauge" locale= 'en-US'>
</EJ.LinearGauge>, document.getElementById('gauge')); 		Property: locale

ReactDOM.render( <LinearGaugeComponent id='gauge'
  locale= 'en-US'/>
document.getElementById('gauge'));
Theme Property: theme

ReactDOM.render( <EJ.LinearGauge
  id= "gauge" theme= 'Highcontrast'>
</EJ.LinearGauge>, document.getElementById('gauge')); 		Property: theme

ReactDOM.render( <LinearGaugeComponent id='gauge'
  theme= 'Highcontrast'/>
document.getElementById('gauge'));
Gauge Title Not Applicable Property: title

ReactDOM.render( <LinearGaugeComponent id='gauge'
  title= 'Linear Gauge'/>
document.getElementById('gauge'));

Gauge Container type

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

var scale = [{
  type: 'therometer' }]
ReactDOM.render( <EJ.LinearGauge id= "gauge"
  scales={scale}> </EJ.LinearGauge>,
document.getElementById('gauge')); 		Property: container.type

ReactDOM.render( <LinearGaugeComponent id='gauge'
  container= { type: 'Thermometer' }/>
document.getElementById('gauge'));
Container Height Not Applicable Property: container.height

ReactDOM.render( <LinearGaugeComponent id='gauge'
  container= { height: 20 }/>
document.getElementById('gauge'));
Container Width Not Applicable Property: container.width

ReactDOM.render( <LinearGaugeComponent id='gauge'
  container= { width: 10 }/>
document.getElementById('gauge'));
Container Offset Not Applicable Property: container.offset

ReactDOM.render( <LinearGaugeComponent id='gauge'
  container= { offset: 5 }/>
document.getElementById('gauge'));

Events

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

ReactDOM.render( <LinearGaugeComponent id='gauge'
  animationComplete={this.animationComplete}/>
document.getElementById('gauge'));
public animationComplete(args): void { }
Annotation Render Event Event: drawCustomLabel

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawCustomLabel={this.drawCustomLabel}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawCustomLabel(args): void { } 		Event: annotationRender

ReactDOM.render( <LinearGaugeComponent id='gauge'
  annotationRender={this.annotationRender}/>
document.getElementById('gauge'));
public annotationRender(args): void { }
AxisLabel Render Event Event: drawLabels

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawLabels={this.drawLabels}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawLabels(args): void { } 		Event: axisLabelRender

ReactDOM.render( <LinearGaugeComponent id='gauge'
  axisLabelRender={this.axisLabelRender}/>
document.getElementById('gauge'));
public axisLabelRender(args): void { }
Load Event Event: load

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  load={this.load}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public load(args): void { } 		Event: load

ReactDOM.render( <LinearGaugeComponent id='gauge'
  load={this.load}/>
document.getElementById('gauge'));
public load(args): void { }
Loaded Event Not Applicable Event: loaded

ReactDOM.render( <LinearGaugeComponent id='gauge'
  loaded={this.loaded}/>
document.getElementById('gauge'));
public loaded(args): void { }
Resize Event Not Applicable Event: resized

ReactDOM.render( <LinearGaugeComponent id='gauge'
  resized={this.resized}/>
document.getElementById('gauge'));
public resized(args): void { }
Tooltip Render Event Not Applicable Event: tooltipRender

ReactDOM.render( <LinearGaugeComponent id='gauge'
  tooltipRender={this.tooltipRender}/>
document.getElementById('gauge'));
public tooltipRender(args): void { }
Value Change Event Not Applicable Event: valueChange

ReactDOM.render( <LinearGaugeComponent id='gauge'
  valueChange={this.valueChange}/>
document.getElementById('gauge'));
public valueChange(args): void { }
Mouse Move Event Event: mouseClickMove

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  mouseClickMove={this.mouseClickMove}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public mouseClickMove(args): void { } 		Event: gaugeMouseMove

ReactDOM.render( <LinearGaugeComponent id='gauge'
  gaugeMouseMove={this.gaugeMouseMove}/>
document.getElementById('gauge'));
public gaugeMouseMove(args): void { }
Mouse Up Event Event: mouseClickUp

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  mouseClickUp={this.mouseClickUp}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public mouseClickUp(args): void { } 		Event: gaugeMouseUp

ReactDOM.render( <LinearGaugeComponent id='gauge'
  gaugeMouseUp={this.gaugeMouseUp}/>
document.getElementById('gauge'));
public gaugeMouseUp(args): void { }
Mouse Down Event Not Applicable Event: gaugeMouseDown

ReactDOM.render( <LinearGaugeComponent id='gauge'
  gaugeMouseDown={this.gaugeMouseDown}/>
document.getElementById('gauge'));
public gaugeMouseDown(args): void { }
Mouse Leave Event Not Applicable Event: gaugeMouseLeave

ReactDOM.render( <LinearGaugeComponent id='gauge'
  gaugeMouseLeave={this.gaugeMouseLeave}/>
document.getElementById('gauge'));
public gaugeMouseLeave(args): void { }
Mouse Click Event Event: mouseClick

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  mouseClick={this.mouseClick}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public mouseClick(args): void { } 		Not Applicable
Render Complete Event Event: renderComplete

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  renderComplete={this.renderComplete}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public renderComplete(args): void { } 		Not Applicable
Double Click Event Event: doubleClick

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  doubleClick={this.doubleClick}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public doubleClick(args): void { } 		Not Applicable
Right Click Event Event: rightClick

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  rightClick={this.rightClick}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public rightClick(args): void { } 		Not Applicable
BarPointers Event Event: drawBarPointers

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawBarPointers={this.drawBarPointers}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawBarPointers(args): void { } 		Not Applicable
Indicators Event Event: drawIndicators

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawIndicators={this.drawIndicators}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawIndicators(args): void { } 		Not Applicable
MarkerPointer Event Event: drawMarkerPointers

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawMarkerPointers={this.drawMarkerPointers}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawMarkerPointers(args): void { } 		Not Applicable
Ranges Event Event: drawRange

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  drawRange={this.drawRange}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public drawRange(args): void { } 		Not Applicable
Gauge Initialized Event Event: init

ReactDOM.render( <EJ.LinearGauge id= "gauge"
  init={this.init}> </EJ.LinearGauge>,
document.getElementById('gauge'));
public init(args): void { } 		Not Applicable