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-circulargauge id="circulargauge1" height="400px"></ejs-circulargauge> |
| Width | Property: width<ej-circular-gauge id="circulargauge1" width="100"></ej-circular-gauge> |
Property: width<ejs-circulargauge id="circulargauge1" width="150px"></ejs-circulargauge> |
| Height(In Percentage) | Not Applicable | Property: height<ejs-circulargauge id="circulargauge1" height="50%"></ejs-circulargauge> |
| Width(In Percentage) | Not Applicable | Property: width<ejs-circulargauge id="circulargauge1" width="80%"></ejs-circulargauge> |
| 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 CircularGaugeFont { 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 CircularGaugeFont { 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 CircularGaugeFont { FontFamily = "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 CircularGaugeFont { FontStyle = "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 CircularGaugeFont { 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 CircularGaugeFont { FontWeight = "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-circulargauge-ranges><e-circulargauge-range start="20"></e-circulargauge-range ></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range end="30"></e-circulargauge-range></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range startWidth="10"></e-circulargauge-range></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range endWidth="10"></e-circulargauge-range></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range color="red"></e-circulargauge-range></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range radius="30"></e-circulargauge-range></e-circulargauge-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-circulargauge-ranges><e-circulargauge-range roundedCornerRadius="10"></e-circulargauge-range></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="Needle" value="20"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer color="red"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer animation="true"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer width="10"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer radius="10"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" value="20"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" markerShape="Diamond"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.Marker" markerWidth="10"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.RangeBar"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-pointers><e-circulargauge-pointer type="@Syncfusion.EJ2.CircularGauge.PointerType.RangeBar" roundedCornerRadius="10"></e-circulargauge-pointer></e-circulargauge-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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage"></e-circulargauge-annotation></e-circulargauge-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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" angle="90"></e-circulargauge-annotation></e-circulargauge-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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" textStyle="textstyle"></e-circulargauge-annotation></e-circulargauge-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge> @{var textstyle = new CircularGaugeFont { 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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" textStyle="textstyle"></e-circulargauge-annotation></e-circulargauge-annotations></e-circulargauge-axis></e-circulargauge-axes></ejs-circulargauge> @{var textstyle = new CircularGaugeFont { Color = "red" };} |
| Auto Angle | Not Applicable | Property: axes.annotations.autoAngle<ejs-circulargauge id="circular"><e-circulargauge-axes><e-circulargauge-axis><e-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" autoAngle="true"></e-circulargauge-annotation></e-circulargauge-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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" radius="10"></e-circulargauge-annotation></e-circulargauge-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-circulargauge-annotations><e-circulargauge-annotation content="LinearGuage" zIndex="1"></e-circulargauge-annotation></e-circulargauge-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 = new CircularGaugeBorder { 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 = new CircularGaugeMargin { 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 |