Search results

Migration from Essential JS 1

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-circular-gauge id="circulargauge1" height="400"></ej-circular-gauge>
Property: height

<ejs-circular-gauge id="circulargauge1" height="400px"></ejs-circular-gauge>
Width Property: width

<ej-circular-gauge id="circulargauge1" width="100"></ej-circular-gauge>
Property: width

<ej-circular-gauge id="circulargauge1" width="150px"></ej-circular-gauge>
Height(In Percentage) Not Applicable Property: height

<ejs-circular-gauge id="circulargauge1" height="50%"></ejs-circular-gauge>
Width(In Percentage) Not Applicable Property: width

<ejs-circular-gauge id="circulargauge1" width="80%"></ejs-circular-gauge>

Axis Line

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales show-scale-bar="true" size="6"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.lineStyle.width

<ejs-circulargauge id="circular"><e-circulargauge-axes> <e-circulargauge-axis><e-axis-linestyle width="4" ></e-axis-linestyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline Color Property: scales.size

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales show-scale-bar="true" background-color="red"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.lineStyle.width

<ejs-circulargauge id="circular"><e-circulargauge-axes> <e-circulargauge-axis><e-axis-linestyle width="4" color="#9E9E9E"></e-axis-linestyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline BackgroundColor Not Applicable Property: axes.background

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis background="red"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline Direction Property: scales.direction

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales direction="@Directions.CounterClockwise"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.direction

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis direction="AntiClockWise"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline Radius Property: scales.radius

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales show-scale-bar="true" radius="150"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.radius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis radius="150"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline Startangle Property: scales.startAngle

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales start-angle="80"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.startAngle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis startAngle="80"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Axisline Endangle Property: scales.sweepAngle

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales sweep-angle="250"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.endAngle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis endAngle="150"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Minimum Axisvalue Property: scales.minimum

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales minimum="20"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minimum

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis minimum="20"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Maximum Axisvalue Property: scales.maximum

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales maximum="200"></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.maximum

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis maximum="200"></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>

Ticks

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Major"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Height of Major Ticks Property: scales.ticks.height

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Major" height="12"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks.height

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks height="12"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Width of Major Ticks Property: scales.ticks.width

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Major" width="3"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks.width

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks width="2"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Color of Major Ticks Property: scales.ticks.color

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Major" color="red"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks.color

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks color="red"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Offset of Major Ticks Property: scales.ticks.distanceFromScale

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Major" distance-from-scale="10"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks.offset

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks offset="5"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Angle of Major Ticks Property: scales.ticks.angle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks angle="10"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Not Applicable
Interval of Major Ticks Property: scales.majorIntervalValue

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales major-interval-value="10"><e-tick-collections><e-ticks type="@CircularTickTypes.Major" interval="10"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.majorTicks.interval

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-majorticks interval="2"></e-axis-majorticks></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Height of Minor Ticks Property: scales.ticks.height

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" height="12"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minorTicks.height

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-minorticks height="12"></e-axis-minorticks ></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Width of Minor Ticks Property: scales.ticks.width

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" width="3"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minorTicks.width

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-minorticks width="3"></e-axis-minorticks ></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Color of Minor Ticks Property: scales.ticks.color

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" color="red"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minorTicks.color

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-minorticks color="red"></e-axis-minorticks ></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Offset of Minor Ticks Property: scales.ticks.distanceFromScale

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" distance-from-scale="10"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minorTicks.offset

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-minorticks offset="10"></e-axis-minorticks ></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Angle of Major Ticks Property: scales.ticks.angle

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" angle ="10"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Interval of Minor Ticks Property: scales.majorIntervalValue

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales minor-interval-value="10"><e-tick-collections><e-ticks type="@CircularTickTypes.Minor" distance-from-scale="10"></e-ticks></e-tick-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.minorTicks.interval

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-minorticks interval="10"></e-axis-minorticks ></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>

Labels

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

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels ></e-circular-labels show-labels="true"></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.autoAngle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle autoAngle="true"></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Angle Property: scales.labels.angle

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels angle="20" ></e-circular-labels ></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Offset Property: scales.labels.distanceFromScales

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels distance-from-scale="10"></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.offset

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle offset="5"></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Format Property: scales.labels.unitText

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels unit-text-position=" @UnitTextPlacement.Front" ></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.format

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle format="kmph"></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
UnitText Position Property: scales.labels.placement

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels placement="@LabelPlacement.Near"></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.position

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle position="@Syncfusion.EJ2.CircularGauge.Position.Inside" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Label Range Color Not Applicable Property: axes.labelStyle.useRangeColor

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle useRangeColor="true" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
LabelText Color Property: scales.labels.color

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels color="red"></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.font.color

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {color="red"}
Opacity Property: scales.labels.opacity

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels opacity="0.2"></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Property: axes.labelStyle.font.opacity

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {opacity="0.5"}
Label Font Family Property: scales.labels.font.fontFamily

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels font="font"></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
var font = new {fontFamily="aerial"}
Property: axes.labelStyle.font.fontFamily

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {font-family="Roboto"}
Label Font Style Property: scales.labels.font.fontStyle

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels font="font" ></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
var font = new {font-style="bold"}
Property: axes.labelStyle.font.fontStyle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {font-style="bold"}
Label Font Size Property: scales.labels.font.size

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales show-labels="true"><e-label-collections><e-circular-labels font="font" ></e-circular-labels></e-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
var font = new {size="12"}
Property: axes.labelStyle.font.size

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {size="12"}
Label Font Weight Not Applicable Property: axes.labelStyle.font.fontWeight

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-labelstyle font="font" ></e-axis-labelstyle></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var font = new {font-weight="regular"}

Ranges

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges start-value="20"></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.ranges.start

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges end-value="30"></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.ranges.end

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-ranges><e-axis-range end="30"></e-axis-range ></e-axis-ranges></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Start Width Property: scales.ranges.startWidth

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges start-width="10"></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.ranges.startWidth

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges end-width="10" ></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.ranges.endWidth

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-ranges><e-axis-range endWidth="10"></e-axis-range></e-axis-ranges></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Color Property: scales.ranges.backgroundColor

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges background-color="red" ></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.ranges.color

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges distance-from-scale="10"></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Placement Property: scales.ranges.placement

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges placement="@RangePlacement.Far" ></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Opacity Property: scales.ranges.opacity

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges opacity=0.5></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Radius Not Applicable Property: axes.ranges.radius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-ranges><e-axis-range radius="30"></e-axis-range></e-axis-ranges></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Rounded Corner Radius Not Applicable Property: axes.ranges.roundedCornerRadius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis> <e-axis-ranges><e-axis-range roundedCornerRadius="10"></e-axis-range></e-axis-ranges></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Gradients Property: scales.ranges.gradients

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges ><e-circular-gradients><e-color-info color-stop="0" color="#FFFFFF"></e-color-info></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Border Property: scales.ranges.border

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-circular-range-collections><e-circular-ranges ><e-border color="blue" width ="2"></e-border></e-circular-ranges></e-circular-range-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable

Needle Pointer

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

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Needle"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.type

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="Needle" value="20"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Needle Pointer Color Property: scales.pointers.backgroundColor

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers background-color="red"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.color

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer color="red"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Animation Property: enableAnimation

<ej-circular-gauge id="circulargauge" enable-animation ="true"></ej-circular-gauge>
Property: axes.pointers.animation

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer animation="true"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Pointer Width Property: scales.pointers.width

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers width="10"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.pointerWidth

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer width="10"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Pointer Radius Property: scales.pointers.distanceFromScale

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers distance-from-scale="10"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.radius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer radius="10"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Opacity Property: scales.pointers.opacity

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers opacity="0.5"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Needle Type Property: scales.pointers.needleType

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers needle-type="@NeedleType.Triangle"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Back Needle Length Property: scales.pointers.backNeedleLength

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers back-needle-length="10" show-back-needle="true"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.needleTail.length

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer ></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>

Marker Pointer

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

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.type

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" value="20"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Marker Type Property: scales.pointers.markerType

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker" marker-type="@MarkerType.Rectangle"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.markerShape

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" markerShape="Diamond"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Marker Width Property: scales.pointers.width

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker" width="10"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.markerWidth

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" markerWidth="10"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Marker Height Property: scales.pointers.length

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker" height="20"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.markerHeight

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" markerHeight="20'></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Marker Image Property: scales.pointers.imageUrl

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker" image-url="a.png"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.imageUrl

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" imageUrl="a.png"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Border Customization Property: scales.pointers.border

<ej-circular-gauge id="circulargauge"><e-circular-scale-collections><e-circular-scales><e-pointer-collections><e-pointers type="@PointerType.Marker" ><e-border ></e-border color="red" width="2"></e-pointers></e-pointer-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.pointers.border

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" border="border"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
var border= new {color="red", width="2"}

Rangebar Pointer

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

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.RangBar" ></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Rounded Corner Radius Not Applicable Property: axes.pointers.roundedCornerRadius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-pointers><e-axis-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.RangBar" roundedCornerRadius="10"></e-axis-pointer></e-axis-pointers></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>

Annotations

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

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge"></e-circular-custom-labels></e-custom-label-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.annotations.content

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Angle Property: scales.customLabels.textAngle

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge" text-angle="90"></e-circular-custom-labels></e-custom-label-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.annotations.angle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" angle="90"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Font Family Property: scales.customLabels.font.fontFamily

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge"><e-custom-font font-family="Arial"></e-custom-font></e-circular-custom-labels></e-custom-label-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.annotations.textStyle.fontFamily

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" textStyle="textstyle"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
textstyle={fontFamily = "Roboto"}
Font Color Property: scales.customLabels.color

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge" color="red"></e-circular-custom-labels></e-custom-label-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Property: axes.annotations.textStyle.color

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" textStyle="textstyle"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
textstyle={ color ="red"}
Auto Angle Not Applicable Property: axes.annotations.autoAngle

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" autoAngle="true"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Radius Not Applicable Property: axes.annotations.radius

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" radius="10"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>
Annotation Position Property: scales.customLabels.position

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge"><e-custom-position x="5" y="-10"></e-custom-position></e-circular-custom-labels></e-custom-label-collections></e-circular-scales></e-circular-scale-collections></ej-circular-gauge>
Not Applicable
Annotation Position Type Property: scales.customLabels.positionType

<ej-circular-gauge id="circulargauge1"><e-circular-scale-collections><e-circular-scales><e-custom-label-collections><e-circular-custom-labels value="Lineargauge" custom-label-position-type=">@Syncfusion.EJ2.CircularGauge.customLabelPositionType.Outer" ></e-circular-custom-labels></e-custom-label-collections></e-circular-scales> </e-circular-scale-collections></ej-circular-gauge>
Not Applicable
ZIndex Not Applicable Property: axes.annotations.zIndex

<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-axis-annotations><e-axis-annotation content="LinearGuage" zIndex="1"></e-axis-annotation></e-axis-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge>

Appearance

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

<ejs-circulargauge id="circular" title="CircularGauge"></ejs-circulargauge>
Background Color Property: backgroundColor

<ej-circular-gauge id="circulargauge" background-color="red" ></ej-circular-gauge>
Property: background

<ejs-circulargauge id="circular"background="red"></ejs-circulargauge>
Localization Property: locale

<ej-circular-gauge id="circulargauge" ></ej-circular-gauge>
Property: locale

<ejs-circulargauge id="circular" locale= "en-US"></ejs-circulargauge>
Border Not Applicable Property: border

<ejs-circulargauge id="circular" border="border"></ejs-circulargauge>
var border={color="red", width="2"}
Center of X Not Applicable Property: centerX

<ejs-circulargauge id="circular" centerX="120px"></ejs-circulargauge>
Center of Y Not Applicable Property: centerY

<ejs-circulargauge id="circular" centerY="120px"></ejs-circulargauge>
Theme Property: theme

<ej-circular-gauge id="circulargauge" ></ej-circular-gauge>
Property: theme

<ejs-circulargauge id="circular" theme="Material" theme="saffron"></ejs-circulargauge>
Margin Not Applicable Property: margin

<ejs-circulargauge id="circular"margin="margin"></ejs-circulargauge>
var margin= {left= 40, right= 40, top= 40, bottom= 40 }

Events

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

<ej-circular-gauge id="circulargauge" draw-custom-label="customLabel"></ej-circular-gauge>
window.customLabel = function (args) {}
Event: annotationRender

<ejs-circulargauge id="circular" annotationRender="annotationRender"></ejs-circulargauge>
window.annotationRender = function (args) {}
Label Event Event: drawLabels

<ej-circular-gauge id="circulargauge" draw-labels="label"></ej-circular-gauge>
window.label = function (args) {}
Event: axisLabelRender

<ejs-circulargauge id="circular" axisLabelRender="axisLabelRender"></ejs-circulargauge>
window.axisLabelRender = function (args) {}
Load Event Event: load

<ej-circular-gauge id="circulargauge" load="load"></ej-circular-gauge>
window.load = function (args) {}
Event: load

<ejs-circulargauge id="circular" load="load"></ejs-circulargauge>
window.load = function (args) {}
Loaded Event Event: loaded

<ej-circular-gauge id="circulargauge" loaded="loaded"></ej-circular-gauge>
window.loaded = function (args) {}
Event: loaded

<ejs-circulargauge id="circular" loaded="loaded"></ejs-circulargauge>
window.loaded = function (args) {}
Tooltip Rendered Event Not Applicable Event: tooltipRender

<ejs-circulargauge id="circular" tooltipRender="tooltipRender"></ejs-circulargauge>
window.tooltipRender = function (args) {}
Resized Rendered Event Not Applicable Event: resized

<ejs-circulargauge id="circular" resized="resized"></ejs-circulargauge>
window.resized = function (args) {}
Animation Event Not Applicable Event: animationComplete

<ejs-circulargauge id="circular" animationComplete="animationComplete"></ejs-circulargauge>
window.animationComplete = function (args) {}
Mousedown Event Event: mouseClick

<ej-circular-gauge id="circulargauge" mouse-click="mouseClick"></ej-circular-gauge>
window.mouseClick = function (args) {}
Event: gaugeMouseDown

<ejs-circulargauge id="circular" gaugeMouseDown="gaugeMouseDown"></ejs-circulargauge>
window.gaugeMouseDown = function (args) {}
Mousemove Event Event: mouseClickMove

<ej-circular-gauge id="circulargauge" mouse-click-move="mouseMove"></ej-circular-gauge>
window.mouseMove = function (args) {}
Event: gaugeMouseLeave

<ejs-circulargauge id="circular" gaugeMouseMove="gaugeMouseMove"></ejs-circulargauge>
window.gaugeMouseMove = function (args) {}
Mouseup Event Event: mouseClickUp

<ej-circular-gauge id="circulargauge" mouse-click-up="mouseUp"></ej-circular-gauge>
window.mouseUp = function (args) {}
Event: gaugeMouseUp

<ejs-circulargauge id="circular" gaugeMouseUp="gaugeMouseUp"></ejs-circulargauge>
window.gaugeMouseUp = function (args) {}
Pointerdrag Move Event Event: drawPointers

<ej-circular-gauge id="circulargauge" draw-pointers="pointer"></ej-circular-gauge>
window.pointer = function (args) {}
Event: dragMove

<ejs-circulargauge id="circular" dragMove="dragMove"></ejs-circulargauge>
window.dragMove = function (args) {}
Draw Range Event Event: drawRange

<ej-circular-gauge id="circulargauge" draw-range="range"></ej-circular-gauge>
window.range = function (args) {}
Not Applicable
Draw Ticks Event Event: drawTicks

<ej-circular-gauge id="circulargauge" draw-ticks="tick"></ej-circular-gauge>
window.tick = function (args) {}
Not Applicable
Legend Render Event Event: legendItemRender

<ej-circular-gauge id="circulargauge" legend-item-render="legendarender"></ej-circular-gauge>
window.legendarender = function (args) {}
Not Applicable
Animation Complete Event Not Applicable Event: animationComplete

<ejs-circulargauge id="circular" animationComplete="animationComplete"></ejs-circulargauge>
window.animationComplete = function (args) {}
Right Click Event Event: rightClick

<ej-circular-gauge id="circulargauge" right-click="rightClick"></ej-circular-gauge>
window.rightClick = function (args) {}
Not Applicable
Double Click Event Event: doubleClick

<ej-circular-gauge id="circulargauge" double-click="doubleClick"></ej-circular-gauge>
window.doubleClick = function (args) {}
Not Applicable