Contents
- Circular gauge dimensions
- Axis Line
- Ticks
- Labels
- Ranges
- Needle Pointer
- Marker Pointer
- Rangebar Pointer
- Annotations
- Appearance
- Events
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202421 minutes to read
This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2.
Circular gauge dimensions
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Height |
Property: height<ej-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>
|
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></br>@{ 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></br>@{ 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></br> 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></br>@{ 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></br>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></br>@{ 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></br>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></br>@{ 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></br>@{ var font = new CircularGaugeFont { FontWeight = "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-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 |
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-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>
|
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-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></br>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-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>
|
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-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> </br> @{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> </br> @{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>
|
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></br>@{ 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></br>@{ var margin = new CircularGaugeMargin { 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></br> window.customLabel = function (args) {}
|
Event: annotationRender<ejs-circulargauge id="circular" annotationRender="annotationRender"></ejs-circulargauge></br>window.annotationRender = function (args) {}
|
| Label Event |
Event: drawLabels<ej-circular-gauge id="circulargauge" draw-labels="label"></ej-circular-gauge></br> window.label = function (args) {}
|
Event: axisLabelRender<ejs-circulargauge id="circular" axisLabelRender="axisLabelRender"></ejs-circulargauge></br>window.axisLabelRender = function (args) {}
|
| Load Event |
Event: load<ej-circular-gauge id="circulargauge" load="load"></ej-circular-gauge></br>window.load = function (args) {}
|
Event: load<ejs-circulargauge id="circular" load="load"></ejs-circulargauge></br>window.load = function (args) {}
|
| Loaded Event |
Event: loaded<ej-circular-gauge id="circulargauge" loaded="loaded"></ej-circular-gauge></br>window.loaded = function (args) {}
|
Event: loaded<ejs-circulargauge id="circular" loaded="loaded"></ejs-circulargauge></br>window.loaded = function (args) {}
|
| Tooltip Rendered Event | Not Applicable |
Event: tooltipRender<ejs-circulargauge id="circular" tooltipRender="tooltipRender"></ejs-circulargauge></br>window.tooltipRender = function (args) {}
|
| Resized Rendered Event | Not Applicable |
Event: resized<ejs-circulargauge id="circular" resized="resized"></ejs-circulargauge></br>window.resized = function (args) {}
|
| Animation Event | Not Applicable |
Event: animationComplete<ejs-circulargauge id="circular" animationComplete="animationComplete"></ejs-circulargauge></br>window.animationComplete = function (args) {}
|
| Mousedown Event |
Event: mouseClick<ej-circular-gauge id="circulargauge" mouse-click="mouseClick"></ej-circular-gauge></br> window.mouseClick = function (args) {}
|
Event: gaugeMouseDown<ejs-circulargauge id="circular" gaugeMouseDown="gaugeMouseDown"></ejs-circulargauge></br>window.gaugeMouseDown = function (args) {}
|
| Mousemove Event |
Event: mouseClickMove<ej-circular-gauge id="circulargauge" mouse-click-move="mouseMove"></ej-circular-gauge></br> window.mouseMove = function (args) {}
|
Event: gaugeMouseLeave<ejs-circulargauge id="circular" gaugeMouseMove="gaugeMouseMove"></ejs-circulargauge></br>window.gaugeMouseMove = function (args) {}
|
| Mouseup Event |
Event: mouseClickUp<ej-circular-gauge id="circulargauge" mouse-click-up="mouseUp"></ej-circular-gauge></br> window.mouseUp = function (args) {}
|
Event: gaugeMouseUp<ejs-circulargauge id="circular" gaugeMouseUp="gaugeMouseUp"></ejs-circulargauge></br>window.gaugeMouseUp = function (args) {}
|
| Pointerdrag Move Event |
Event: drawPointers<ej-circular-gauge id="circulargauge" draw-pointers="pointer"></ej-circular-gauge></br>window.pointer = function (args) {}
|
Event: dragMove<ejs-circulargauge id="circular" dragMove="dragMove"></ejs-circulargauge></br>window.dragMove = function (args) {}
|
| Draw Range Event |
Event: drawRange<ej-circular-gauge id="circulargauge" draw-range="range"></ej-circular-gauge></br>window.range = function (args) {}
|
Not Applicable |
| Draw Ticks Event |
Event: drawTicks<ej-circular-gauge id="circulargauge" draw-ticks="tick"></ej-circular-gauge></br> window.tick = function (args) {}
|
Not Applicable |
| Legend Render Event |
Event: legendItemRender<ej-circular-gauge id="circulargauge" legend-item-render="legendarender"></ej-circular-gauge></br> window.legendarender = function (args) {}
|
Not Applicable |
| Animation Complete Event | Not Applicable |
Event: animationComplete<ejs-circulargauge id="circular" animationComplete="animationComplete"></ejs-circulargauge></br>window.animationComplete = function (args) {}
|
| Right Click Event |
Event: rightClick<ej-circular-gauge id="circulargauge" right-click="rightClick"></ej-circular-gauge></br> window.rightClick = function (args) {}
|
Not Applicable |
| Double Click Event |
Event: doubleClick<ej-circular-gauge id="circulargauge" double-click="doubleClick"></ej-circular-gauge></br>window.doubleClick = function (args) {}
|
Not Applicable |