This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Height | Property: height<ej-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> |
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> |
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> |
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"} |
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 |
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> |
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"} |
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> |
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> |
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 } |
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 |