Ej1 api migration in React Circular gauge component

17 Mar 202523 minutes to read

This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2.

Circular gauge dimensions

Behavior API in Essential® JS 1 API in Essential® JS 2
Height Property: height

<EJ.CircularGauge id="circulargauge" height={500} ></EJ.CircularGauge>,

document.getElementById('circulargauge') 		Property: height

<CircularGaugeComponent id='circulargauge' height="650"></CircularGaugeComponent>,

document.getElementById('circulargauge'));
Width Property: width

<EJ.CircularGauge id="circulargauge" width={500} ></EJ.CircularGauge>,

document.getElementById('circulargauge') 		Property: width

<CircularGaugeComponent id='circulargauge' width="80%"></CircularGaugeComponent>,

document.getElementById('circulargauge'));
Height(In Percentage) Not Applicable Property: height

<CircularGaugeComponent id='circulargauge' height='100%'></CircularGaugeComponent>,

document.getElementById('circulargauge'));
Width(In Percentage) Not Applicable Property: width

<CircularGaugeComponent id='circulargauge' width="100%"></CircularGaugeComponent>,

document.getElementById('circulargauge'));

Axis Line

Behavior API in Essential® JS 1 API in Essential® JS 2
Axisline Width Property: scales.size

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ showScaleBar: true, size: 6}] 		Property: axes.lineStyle.width

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective lineStyle = {{width: 2}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline Color Property: scales.color

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ showScaleBar: true, color:"red"}] 		Property: axes.lineStyle.width

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective lineStyle = {{color: 'red' }}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline BackgroundColor Not Applicable Property: axes.background

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective background='red'></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline Direction Property: scales.direction

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ direction: "counterclockwise"}] 		Property: axes.direction

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective direction= 'AntiClockWise'></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline Radius Property: scales.radius

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ showScaleBar: true, radius: 150}] 		Property: axes.radius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective radius='150'></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline Startangle Property: scales.startAngle

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ startAngle: 80}] 		Property: axes.startAngle

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective startAngle= {200} ></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Axisline Endangle Property: scales.sweepAngle

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ sweepAngle: 250}] 		Property: axes.endAngle

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective endAngle={150} ></AxisDirective></AxesDirective> </CircularGaugeComponent>,
document.getElementById('circulargauge'));
Minimum Axisvalue Property: scales.minimum

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ minimum: 20 }] 		Property: axes.minimum

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minimum={200}></AxisDirective></AxesDirective> </CircularGaugeComponent>,
document.getElementById('circulargauge'));
Maximum Axisvalue Property: scales.maximum

<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')

var scales =[{ maximum: 200}] 		Property: axes.maximum

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective maximum={200}></AxisDirective></AxesDirective> </CircularGaugeComponent>,
document.getElementById('circulargauge'));

Ticks

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

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major"}]}] 		Property: axes.majorTicks

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{width: 2}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Height of Major Ticks Property: scales.ticks.height

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major", height: 12}]}] 		Property: axes.majorTicks.height

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{height: 12}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Width of Major Ticks Property: scales.ticks.width

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major", width: 3}]}] 		Property: axes.majorTicks.width

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{width: 3}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Color of Major Ticks Property: scales.ticks.color

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major",color: "#777777"}]}] 		Property: axes.majorTicks.color

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{color: "#777777" }}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Offset of Major Ticks Property: scales.ticks.distanceFromScale

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major",distanceFromScale: 10 }]}] 		Property: axes.majorTicks.offset

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{offset: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Angle of Major Ticks Property: scales.ticks.angle

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major", angle: 10 }]}] 		Not Applicable
Interval of Major Ticks Property: scales.majorIntervalValue

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "major", majorIntervalValue: 10 }]}] 		Property: axes.majorTicks.interval

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{interval: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Height of Minor Ticks Property: scales.ticks.height

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor",height: 12}]}] 		Property: axes.minorTicks.height

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{ height: 12}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Width of Minor Ticks Property: scales.ticks.width

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor", width: 3 }]}] 		Property: axes.minorTicks.width

l<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{width: 3}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Color of Minor Ticks Property: scales.ticks.color

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor",color: "#777777"}]}] 		Property: axes.minorTicks.color

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{ color: "#777777" }}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Offset of Minor Ticks Property: scales.ticks.distanceFromScale

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor",distanceFromScale: 10}]}] 		Property: axes.minorTicks.offset

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{offset: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Angle of Major Ticks Property: scales.ticks.angle

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor",angle: 10 }]}] 		Not Applicable
Interval of Minor Ticks Property: scales.majorIntervalValue

<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('circulargauge')
var scales =[{ticks:[{ type: "minor",majorIntervalValue: 10}]}] 		Property: axes.minorTicks.interval

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{interval: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Labels

Behavior API in Essential® JS 1 API in Essential® JS 2
Autoangle Property: scales.labels.autoAngle

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ showLabels: true, autoAngle: true}]}] 		Property: axes.labelStyle.autoAngle

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{autoAngle: true}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Angle Property: scales.labels.angle

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ showLabels: true, angle: 30}]}] 		Not Applicable
Offset Property: scales.labels.distanceFromScales

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ showLabels: true, distanceFromScales: 10 }]}] 		Property: axes.labelStyle.offset

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{offset: 5}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Format Property: scales.labels.unitText

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ unitText: "kmph", unitTextPosition: "front" }]}] 		Property: axes.labelStyle.format

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{format: "kmph"}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
UnitText Position Property: scales.labels.placement

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ showLabels: true, placement: "near"}]}] 		Property: axes.labelStyle.position

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{position: "Outside" }}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{useRangeColor: true}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
LabelText Color Property: scales.labels.color

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

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { color: "red" } }}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Opacity Property: scales.labels.opacity

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ opacity: 0.3}]}] 		Property: axes.labelStyle.font.opacity

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { opacity: 0.5 }}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Label Font Family Property: scales.labels.font.fontFamily

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ font: { fontFamily: "Arial" }]}] 		Property: axes.labelStyle.font.fontFamily

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontFamily: 'Roboto' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Label Font Style Property: scales.labels.font.fontStyle

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

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontStyle: 'Bold' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Label Font Size Property: scales.labels.font.size

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{labels: [{ font: { size: "12px" }]}] 		Property: axes.labelStyle.font.size

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { size: '12px' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontWeight: 'Regular' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Ranges

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

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ startValue: 20}]}] 		Property: axes.ranges.start

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective start={20}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
End Value Property: scales.ranges.endValue

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{endValue: 30 }]}] 		Property: axes.ranges.end

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective end={30}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Start Width Property: scales.ranges.startWidth

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ startWidth: 10}]}] 		Property: axes.ranges.startWidth

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective startWidth={10} ></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
End Width Property: scales.ranges.endWidth

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{endWidth: 10 }]}] 		Property: axes.ranges.endWidth

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective endWidth={10}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Color Property: scales.ranges.backgroundColor

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ backgroundColor: "red"}]}] 		Property: axes.ranges.color

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective color= "red"></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Offset Property: scales.ranges.distanceFromScale

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{distanceFromScale: 10 }]}] 		Not Applicable
Placement Property: scales.ranges.placement

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ placement: "center"}]}] 		Not Applicable
Opacity Property: scales.ranges.opacity

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ opacity: 0.5}]}] 		Not Applicable
Radius Not Applicable Property: axes.ranges.radius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective radius= '80'></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Rounded Corner Radius Not Applicable Property: axes.ranges.roundedCornerRadius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective roundedCornerRadius={10}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Gradients Property: scales.ranges.gradients

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ showRanges: true, radients: { colorInfo: [{ colorStop : 0, color:"#FFFFFF" }] }]}] 		Not Applicable
Border Property: scales.ranges.border

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{showRanges: true,ranges: [{ border: { color: "blue", width: 2 }]}] 		Not Applicable

Needle Pointer

Behavior API in Essential® JS 1 API in Essential® JS 2
Needle Pointer Property: scales.pointers.type

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle' }]}] 		Property: axes.pointers.type

<CircularGaugeComponent id='circulargauge'>< AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' value={20}></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Needle Pointer Color Property: scales.pointers.backgroundColor

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle',backgroundColor: 'red' }]}] 		Property: axes.pointers.color

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' color= 'red'></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Animation Property: enableAnimation

<EJ.CircularGauge id="gauge" enableAnimation={true}></EJ.CircularGauge>,
document.getElementById('gauge') 		Property: axes.pointers.animation

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' animation: true duration= {1000} ></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Pointer Width Property: scales.pointers.width

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle',width: 5 }]}] 		Property: axes.pointers.pointerWidth

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' pointerWidth= {5} ></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Pointer Radius Property: scales.pointers.distanceFromScale

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle', distanceFromScale: 10 }]}] 		Property: axes.pointers.radius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective radius={80}></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Opacity Property: scales.pointers.opacity

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle',opacity: 0.5 }]}] 		Not Applicable
Needle Type Property: scales.pointers.needleType

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle',needleType: "triangle" }]}] 		Not Applicable
Back Needle Length Property: scales.pointers.backNeedleLength

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'needle',showBackNeedle: true, backNeedleLength: 3 }]}] 		Property: axes.pointers.needleTail.length

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective needleTail= { length: 5 } ></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Marker Pointer

Behavior API in Essential® JS 1 API in Essential® JS 2
Marker Pointer Property: scales.pointers.type

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker' }]}] 		Property: axes.pointers.type

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' value={20} ></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Marker Type Property: scales.pointers.markerType

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker', markerType: "rectangle" }]}] 		Property: axes.pointers.markerShape

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerShape='Diamond'></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Marker Width Property: scales.pointers.width

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker', width: 20 }]}] 		Property: axes.pointers.markerWidth

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerWidth= 20 ></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Marker Height Property: scales.pointers.length

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker', length: 25 }]}] 		Property: axes.pointers.markerHeight

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerHeight={25}></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Marker Image Property: scales.pointers.imageUrl

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker', imageUrl: "football.png" }]}] 		Property: axes.pointers.imageUrl

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' imageUrl= "football.png"></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Border Customization Property: scales.pointers.border

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{pointers: [{ type: 'marker', border: { color: 'red', width: 2 } }]}] 		Property: axes.pointers.border

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' border={ color: 'red', width: 2 }></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Rangebar Pointer

Behavior API in Essential® JS 1 API in Essential® JS 2
Rangebar Not Applicable Property: axes.pointers.type

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'RangeBar' ></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Rounded Corner Radius Not Applicable Property: axes.pointers.roundedCornerRadius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'RangeBar' roundedCornerRadius={10}></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Annotations

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

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge' }]}] 		Property: axes.annotations.content

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' ></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Angle Property: scales.customLabels.textAngle

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', textAngle: 90}]}] 		Property: axes.annotations.angle

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' angle={90}></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Font Family Property: scales.customLabels.font.fontFamily

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge',font: { fontFamily: "Arial" } }]}] 		Property: axes.annotations.textStyle.fontFamily

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' textStyle= { fontFamily: "Arial" }></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Font Color Property: scales.customLabels.color

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', color : "red"}]}] 		Property: axes.annotations.textStyle.color

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' textStyle= { color: "red" }></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Auto Angle Not Applicable Property: axes.annotations.autoAngle

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' autoAngle = true ></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Radius Not Applicable Property: axes.annotations.radius

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' radius = "10%"></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Annotation Position Property: scales.customLabels.position

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', position : { x: 10, y: 10 } }]}] 		Not Applicable
Annotation Position Type Property: scales.customLabels.positionType

<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>,
document.getElementById('gauge')
var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge',positionType : "outer" }]}] 		Not Applicable
ZIndex Not Applicable Property: axes.annotations.zIndex

<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' zIndex ='1'></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Appearance

Behavior API in Essential® JS 1 API in Essential® JS 2
Title Not Applicable Property: title

<CircularGaugeComponent id='circulargauge'title= 'Circular Gauge' ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Background Color Property: backgroundColor

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

<CircularGaugeComponent id='circulargauge' background = "red" ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Localization Property: locale

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

<CircularGaugeComponent id='circulargauge' locale = "en-US" ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Border Not Applicable Property: border

<CircularGaugeComponent id='circulargauge' border ={ color: "red" , width: 2 } ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Center of X Not Applicable Property: centerX

<CircularGaugeComponent id='circulargauge' centerX = "120px" ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Center of Y Not Applicable Property: centerY

<CircularGaugeComponent id='circulargauge' centerY = "150px"></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Theme Property: theme

<EJ.CircularGauge id="gauge" theme = "flatlight" ></EJ.CircularGauge>,
document.getElementById('gauge') 		Property: theme

<CircularGaugeComponent id='circulargauge' theme = "Material" ></CircularGaugeComponent>,
document.getElementById('circulargauge'));
Margin Not Applicable Property: margin

<CircularGaugeComponent id='circulargauge' margin= { left: 40, right: 40, top: 40, bottom: 40 }></CircularGaugeComponent>,
document.getElementById('circulargauge'));

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Annotation Event Event: drawCustomLabel

<EJ.CircularGauge id="gauge" drawCustomLabel={drawCustomLabel}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawCustomLabel(args) {} 		Event: annotationRender

<CircularGaugeComponent id='circulargauge' annotationRender={this. annotationRender.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public annotationRender(args: IAnnotationRenderEventArgs): void {}
Label Event Event: drawLabels

<EJ.CircularGauge id="gauge" drawLabels={drawLabels}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawLabels(args) {} 		Event: axisLabelRender

<CircularGaugeComponent id='circulargauge' axisLabelRender={this.axisLabelRender.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public axisLabelRender(args: IAxisLabelRenderEventArgs): void {}
Load Event Event: load

<EJ.CircularGauge id="gauge" load={load}></EJ.CircularGauge>,
document.getElementById('gauge')
function load(args) {} 		Event: load

<CircularGaugeComponent id='circulargauge' load={this.load.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public load(args: ILoadedEventArgs): void {}
Loaded Event Event: loaded

<EJ.CircularGauge id="gauge" loaded={loaded}></EJ.CircularGauge>,
document.getElementById('gauge')
function loaded(args) {} 		Event: loaded

<CircularGaugeComponent id='circulargauge' loaded={this.loaded.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public loaded(args: ILoadedEventArgs): void {}
Tooltip Rendered Event Not Applicable Event: tooltipRender

<CircularGaugeComponent id='circulargauge' tooltipRender={this.tooltipRender.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public tooltipRender(args: ITooltipRenderEventArgs): void {}
Resized Rendered Event Not Applicable Event: resized

<CircularGaugeComponent id='circulargauge' tooltipRender={this.tooltipRender.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public tooltipRender(args: IResizeEventArgs): void {}
Animation Event Not Applicable Event: animationComplete

<CircularGaugeComponent id='circulargauge' animationComplete={this.animationComplete.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public animationComplete(args: IAnimationCompleteEventArgs): void {}
Mousedown Event Event: mouseClick

<EJ.CircularGauge id="gauge" mouseClick={ mouseClick}></EJ.CircularGauge>,
document.getElementById('gauge')
function mouseClick(args) {} 		Event: gaugeMouseDown

<CircularGaugeComponent id='circulargauge' gaugeMouseDown={this.gaugeMouseDown.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public gaugeMouseDown(args: IMouseEventArgs): void {}
Mousemove Event Event: mouseClickMove

<EJ.CircularGauge id="gauge" mouseClickMove={mouseClickMove}></EJ.CircularGauge>,
document.getElementById('gauge')
function mouseClickMove(args) {} 		Event: gaugeMouseLeave

<CircularGaugeComponent id='circulargauge' gaugeMouseLeave={this.gaugeMouseLeave.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public gaugeMouseLeave(args: IMouseEventArgs): void {}
Mouseup Event Event: mouseClickUp

<EJ.CircularGauge id="gauge" mouseClickUp={ mouseClickUp}></EJ.CircularGauge>,
document.getElementById('gauge')
function mouseClickUp(args) {} 		Event: gaugeMouseUp

<CircularGaugeComponent id='circulargauge' gaugeMouseUp={this.gaugeMouseUp.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public gaugeMouseUp(args: IMouseEventArgs): void {}
Pointerdrag Move Event Event: drawPointers

<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawpointers(args) {} 		Event: dragMove

<CircularGaugeComponent id='circulargauge' dragMove={this. dragMove.bind(this)}></CircularGaugeComponent>,
document.getElementById('circulargauge'));
public dragMove(args: IMouseEventArgs): void {}
Draw Range Event Event: drawRange

<EJ.CircularGauge id="gauge" drawRange={drawRange}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawRange(args) {} 		Not Applicable
Draw Ticks Event Event: drawTicks

<EJ.CircularGauge id="gauge" drawTicks={drawTicks}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawTicks(args) {} 		Not Applicable
Legend Render Event Event: legendItemRender

<EJ.CircularGauge id="gauge" legendItemRender={ legendItemRender}></EJ.CircularGauge>,
document.getElementById('gauge')
function legendItemRender(args) {} 		Not Applicable
Right Click Event Event: rightClick

<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawpointers(args) {} 		Not Applicable
Double Click Event Event: doubleClick

<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>,
document.getElementById('gauge')
function drawpointers(args) {} 		Not Applicable