Ej1 api migration in React Circular gauge component
24 Jan 202323 minutes to read
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Circular gauge dimensions
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Height |
Property: height<EJ.CircularGauge id="circulargauge" height={500} ></EJ.CircularGauge>, document.getElementById('circulargauge')
|
Property: height<CircularGaugeComponent id='circulargauge' height="650"></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Width |
Property: width<EJ.CircularGauge id="circulargauge" width={500} ></EJ.CircularGauge>, document.getElementById('circulargauge')
|
Property: width<CircularGaugeComponent id='circulargauge' width="80%"></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Height(In Percentage) | Not Applicable |
Property: height<CircularGaugeComponent id='circulargauge' height='100%'></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Width(In Percentage) | Not Applicable |
Property: width<CircularGaugeComponent id='circulargauge' width="100%"></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axis Line
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Axisline Width |
Property: scales.size<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ showScaleBar: true, size: 6}]
|
Property: axes.lineStyle.width<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective lineStyle = {{width: 2}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline Color |
Property: scales.color<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ showScaleBar: true, color:"red"}]
|
Property: axes.lineStyle.width<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective lineStyle = {{color: 'red' }}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline BackgroundColor | Not Applicable |
Property: axes.background<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective background='red'></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline Direction |
Property: scales.direction<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ direction: "counterclockwise"}]
|
Property: axes.direction<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective direction= 'AntiClockWise'></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline Radius |
Property: scales.radius<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ showScaleBar: true, radius: 150}]
|
Property: axes.radius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective radius='150'></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline Startangle |
Property: scales.startAngle<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ startAngle: 80}]
|
Property: axes.startAngle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective startAngle= {200} ></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Axisline Endangle |
Property: scales.sweepAngle<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ sweepAngle: 250}]
|
Property: axes.endAngle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective endAngle={150} ></AxisDirective></AxesDirective> </CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Minimum Axisvalue |
Property: scales.minimum<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ minimum: 20 }]
|
Property: axes.minimum<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minimum={200}></AxisDirective></AxesDirective> </CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Maximum Axisvalue |
Property: scales.maximum<EJ.CircularGauge id="circulargauge" scales = {scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ maximum: 200}]
|
Property: axes.maximum<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective maximum={200}></AxisDirective></AxesDirective> </CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Ticks
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type of Ticks |
Property: scales.ticks.type<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major"}]}]
|
Property: axes.majorTicks<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{width: 2}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Height of Major Ticks |
Property: scales.ticks.height<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major", height: 12}]}]
|
Property: axes.majorTicks.height<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{height: 12}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Width of Major Ticks |
Property: scales.ticks.width<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major", width: 3}]}]
|
Property: axes.majorTicks.width<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{width: 3}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Color of Major Ticks |
Property: scales.ticks.color<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major",color: "#777777"}]}]
|
Property: axes.majorTicks.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{color: "#777777" }}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Offset of Major Ticks |
Property: scales.ticks.distanceFromScale<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major",distanceFromScale: 10 }]}]
|
Property: axes.majorTicks.offset<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{offset: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Angle of Major Ticks |
Property: scales.ticks.angle<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major", angle: 10 }]}]
|
Not Applicable |
Interval of Major Ticks |
Property: scales.majorIntervalValue<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "major", majorIntervalValue: 10 }]}]
|
Property: axes.majorTicks.interval<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective majorTicks = {{interval: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Height of Minor Ticks |
Property: scales.ticks.height<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor",height: 12}]}]
|
Property: axes.minorTicks.height<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{ height: 12}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Width of Minor Ticks |
Property: scales.ticks.width<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor", width: 3 }]}]
|
Property: axes.minorTicks.width l <CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{width: 3}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Color of Minor Ticks |
Property: scales.ticks.color<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor",color: "#777777"}]}]
|
Property: axes.minorTicks.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{ color: "#777777" }}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Offset of Minor Ticks |
Property: scales.ticks.distanceFromScale<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor",distanceFromScale: 10}]}]
|
Property: axes.minorTicks.offset<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{offset: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Angle of Major Ticks |
Property: scales.ticks.angle<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor",angle: 10 }]}]
|
Not Applicable |
Interval of Minor Ticks |
Property: scales.majorIntervalValue<EJ.CircularGauge id="circulargauge" scales={scales}></EJ.CircularGauge>, document.getElementById('circulargauge') var scales =[{ticks:[{ type: "minor",majorIntervalValue: 10}]}]
|
Property: axes.minorTicks.interval<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective minorTicks = {{interval: 10}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Labels
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Autoangle |
Property: scales.labels.autoAngle<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ showLabels: true, autoAngle: true}]}]
|
Property: axes.labelStyle.autoAngle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{autoAngle: true}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Angle |
Property: scales.labels.angle<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ showLabels: true, angle: 30}]}]
|
Not Applicable |
Offset |
Property: scales.labels.distanceFromScales<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ showLabels: true, distanceFromScales: 10 }]}]
|
Property: axes.labelStyle.offset<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{offset: 5}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Format |
Property: scales.labels.unitText<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ unitText: "kmph", unitTextPosition: "front" }]}]
|
Property: axes.labelStyle.format<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{format: "kmph"}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
UnitText Position |
Property: scales.labels.placement<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ showLabels: true, placement: "near"}]}]
|
Property: axes.labelStyle.position<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{position: "Outside" }}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Label Range Color | Not Applicable |
Property: axes.labelStyle.useRangeColor<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{useRangeColor: true}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
LabelText Color |
Property: scales.labels.color<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{color: "red" }]}]
|
Property: axes.labelStyle.font.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { color: "red" } }}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Opacity |
Property: scales.labels.opacity<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ opacity: 0.3}]}]
|
Property: axes.labelStyle.font.opacity<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { opacity: 0.5 }}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Label Font Family |
Property: scales.labels.font.fontFamily<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ font: { fontFamily: "Arial" }]}]
|
Property: axes.labelStyle.font.fontFamily<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontFamily: 'Roboto' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Label Font Style |
Property: scales.labels.font.fontStyle<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{font: { fontStyle: "Bold" } }]}]
|
Property: axes.labelStyle.font.fontStyle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontStyle: 'Bold' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Label Font Size |
Property: scales.labels.font.size<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{labels: [{ font: { size: "12px" }]}]
|
Property: axes.labelStyle.font.size<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { size: '12px' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Label Font Weight | Not Applicable |
Property: axes.labelStyle.font.fontWeight<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective labelStyle = {{font: { fontWeight: 'Regular' }}}></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Ranges
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Start Value |
Property: scales.ranges.startValue<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ startValue: 20}]}]
|
Property: axes.ranges.start<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective start={20}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
End Value |
Property: scales.ranges.endValue<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{endValue: 30 }]}]
|
Property: axes.ranges.end<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective end={30}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Start Width |
Property: scales.ranges.startWidth<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ startWidth: 10}]}]
|
Property: axes.ranges.startWidth<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective startWidth={10} ></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
End Width |
Property: scales.ranges.endWidth<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{endWidth: 10 }]}]
|
Property: axes.ranges.endWidth<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective endWidth={10}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Color |
Property: scales.ranges.backgroundColor<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ backgroundColor: "red"}]}]
|
Property: axes.ranges.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective color= "red"></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Offset |
Property: scales.ranges.distanceFromScale<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{distanceFromScale: 10 }]}]
|
Not Applicable |
Placement |
Property: scales.ranges.placement<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ placement: "center"}]}]
|
Not Applicable |
Opacity |
Property: scales.ranges.opacity<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ opacity: 0.5}]}]
|
Not Applicable |
Radius | Not Applicable |
Property: axes.ranges.radius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective radius= '80'></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Rounded Corner Radius | Not Applicable |
Property: axes.ranges.roundedCornerRadius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><RangesDirective><RangeDirective roundedCornerRadius={10}></RangeDirective></RangesDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Gradients |
Property: scales.ranges.gradients<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ showRanges: true, radients: { colorInfo: [{ colorStop : 0, color:"#FFFFFF" }] }]}]
|
Not Applicable |
Border |
Property: scales.ranges.border<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{showRanges: true,ranges: [{ border: { color: "blue", width: 2 }]}]
|
Not Applicable |
Needle Pointer
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Needle Pointer |
Property: scales.pointers.type<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle' }]}]
|
Property: axes.pointers.type<CircularGaugeComponent id='circulargauge'>< AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' value={20}></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Needle Pointer Color |
Property: scales.pointers.backgroundColor<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle',backgroundColor: 'red' }]}]
|
Property: axes.pointers.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' color= 'red'></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Animation |
Property: enableAnimation<EJ.CircularGauge id="gauge" enableAnimation={true}></EJ.CircularGauge>, document.getElementById('gauge')
|
Property: axes.pointers.animation<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' animation: true duration= {1000} ></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Pointer Width |
Property: scales.pointers.width<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle',width: 5 }]}]
|
Property: axes.pointers.pointerWidth<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'needle' pointerWidth= {5} ></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Pointer Radius |
Property: scales.pointers.distanceFromScale<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle', distanceFromScale: 10 }]}]
|
Property: axes.pointers.radius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective radius={80}></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Opacity |
Property: scales.pointers.opacity<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle',opacity: 0.5 }]}]
|
Not Applicable |
Needle Type |
Property: scales.pointers.needleType<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle',needleType: "triangle" }]}]
|
Not Applicable |
Back Needle Length |
Property: scales.pointers.backNeedleLength<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'needle',showBackNeedle: true, backNeedleLength: 3 }]}]
|
Property: axes.pointers.needleTail.length<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective needleTail= { length: 5 } ></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Marker Pointer
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Marker Pointer |
Property: scales.pointers.type<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker' }]}]
|
Property: axes.pointers.type<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' value={20} ></PointerDirective></PointersDirective> </AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Marker Type |
Property: scales.pointers.markerType<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker', markerType: "rectangle" }]}]
|
Property: axes.pointers.markerShape<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerShape='Diamond'></PointerDirective></PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Marker Width |
Property: scales.pointers.width<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker', width: 20 }]}]
|
Property: axes.pointers.markerWidth<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerWidth= 20 ></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Marker Height |
Property: scales.pointers.length<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker', length: 25 }]}]
|
Property: axes.pointers.markerHeight<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' markerHeight={25}></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Marker Image |
Property: scales.pointers.imageUrl<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker', imageUrl: "football.png" }]}]
|
Property: axes.pointers.imageUrl<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' imageUrl= "football.png"></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Border Customization |
Property: scales.pointers.border<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{pointers: [{ type: 'marker', border: { color: 'red', width: 2 } }]}]
|
Property: axes.pointers.border<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'marker' border={ color: 'red', width: 2 }></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Rangebar Pointer
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Rangebar | Not Applicable |
Property: axes.pointers.type<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'RangeBar' ></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Rounded Corner Radius | Not Applicable |
Property: axes.pointers.roundedCornerRadius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><PointersDirective><PointerDirective type= 'RangeBar' roundedCornerRadius={10}></PointerDirective> </PointersDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Annotations
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Content |
Property: scales.customLabels.value<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge' }]}]
|
Property: axes.annotations.content<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' ></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Angle |
Property: scales.customLabels.textAngle<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', textAngle: 90}]}]
|
Property: axes.annotations.angle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' angle={90}></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Font Family |
Property: scales.customLabels.font.fontFamily<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge',font: { fontFamily: "Arial" } }]}]
|
Property: axes.annotations.textStyle.fontFamily<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' textStyle= { fontFamily: "Arial" }></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Font Color |
Property: scales.customLabels.color<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', color : "red"}]}]
|
Property: axes.annotations.textStyle.color<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' textStyle= { color: "red" }></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Auto Angle | Not Applicable |
Property: axes.annotations.autoAngle<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' autoAngle = true ></AnnotationDirective></AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Radius | Not Applicable |
Property: axes.annotations.radius<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' radius = "10%"></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Annotation Position |
Property: scales.customLabels.position<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge', position : { x: 10, y: 10 } }]}]
|
Not Applicable |
Annotation Position Type |
Property: scales.customLabels.positionType<EJ.CircularGauge id="gauge" scales={scales}></EJ.CircularGauge>, document.getElementById('gauge') var scales =[{ showCustomLabels: true, customLabels: [{ value: 'Lineargauge',positionType : "outer" }]}]
|
Not Applicable |
ZIndex | Not Applicable |
Property: axes.annotations.zIndex<CircularGaugeComponent id='circulargauge'><AxesDirective><AxisDirective><AnnotationsDirective><AnnotationDirective content= 'Annotation' zIndex ='1'></AnnotationDirective> </AnnotationsDirective></AxisDirective></AxesDirective></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Appearance
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Title | Not Applicable |
Property: title<CircularGaugeComponent id='circulargauge'title= 'Circular Gauge' ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Background Color |
Property: backgroundColor<EJ.CircularGauge id="gauge" backgroundColor = "red" ></EJ.CircularGauge>, document.getElementById('gauge')
|
Property: background<CircularGaugeComponent id='circulargauge' background = "red" ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Localization |
Property: locale<EJ.CircularGauge id="gauge" locale = "en-US"></EJ.CircularGauge>, document.getElementById('gauge')
|
Property: locale<CircularGaugeComponent id='circulargauge' locale = "en-US" ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Border | Not Applicable |
Property: border<CircularGaugeComponent id='circulargauge' border ={ color: "red" , width: 2 } ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Center of X | Not Applicable |
Property: centerX<CircularGaugeComponent id='circulargauge' centerX = "120px" ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Center of Y | Not Applicable |
Property: centerY<CircularGaugeComponent id='circulargauge' centerY = "150px"></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Theme |
Property: theme<EJ.CircularGauge id="gauge" theme = "flatlight" ></EJ.CircularGauge>, document.getElementById('gauge')
|
Property: theme<CircularGaugeComponent id='circulargauge' theme = "Material" ></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Margin | Not Applicable |
Property: margin<CircularGaugeComponent id='circulargauge' margin= { left: 40, right: 40, top: 40, bottom: 40 }></CircularGaugeComponent>, document.getElementById('circulargauge'));
|
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Annotation Event |
Event: drawCustomLabel<EJ.CircularGauge id="gauge" drawCustomLabel={drawCustomLabel}></EJ.CircularGauge>, document.getElementById('gauge') function drawCustomLabel(args) {}
|
Event: annotationRender<CircularGaugeComponent id='circulargauge' annotationRender={this. annotationRender.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public annotationRender(args: IAnnotationRenderEventArgs): void {}
|
Label Event |
Event: drawLabels<EJ.CircularGauge id="gauge" drawLabels={drawLabels}></EJ.CircularGauge>, document.getElementById('gauge') function drawLabels(args) {}
|
Event: axisLabelRender<CircularGaugeComponent id='circulargauge' axisLabelRender={this.axisLabelRender.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public axisLabelRender(args: IAxisLabelRenderEventArgs): void {}
|
Load Event |
Event: load<EJ.CircularGauge id="gauge" load={load}></EJ.CircularGauge>, document.getElementById('gauge') function load(args) {}
|
Event: load<CircularGaugeComponent id='circulargauge' load={this.load.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public load(args: ILoadedEventArgs): void {}
|
Loaded Event |
Event: loaded<EJ.CircularGauge id="gauge" loaded={loaded}></EJ.CircularGauge>, document.getElementById('gauge') function loaded(args) {}
|
Event: loaded<CircularGaugeComponent id='circulargauge' loaded={this.loaded.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public loaded(args: ILoadedEventArgs): void {}
|
Tooltip Rendered Event | Not Applicable |
Event: tooltipRender<CircularGaugeComponent id='circulargauge' tooltipRender={this.tooltipRender.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public tooltipRender(args: ITooltipRenderEventArgs): void {}
|
Resized Rendered Event | Not Applicable |
Event: resized<CircularGaugeComponent id='circulargauge' tooltipRender={this.tooltipRender.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public tooltipRender(args: IResizeEventArgs): void {}
|
Animation Event | Not Applicable |
Event: animationComplete<CircularGaugeComponent id='circulargauge' animationComplete={this.animationComplete.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public animationComplete(args: IAnimationCompleteEventArgs): void {}
|
Mousedown Event |
Event: mouseClick<EJ.CircularGauge id="gauge" mouseClick={ mouseClick}></EJ.CircularGauge>, document.getElementById('gauge') function mouseClick(args) {}
|
Event: gaugeMouseDown<CircularGaugeComponent id='circulargauge' gaugeMouseDown={this.gaugeMouseDown.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public gaugeMouseDown(args: IMouseEventArgs): void {}
|
Mousemove Event |
Event: mouseClickMove<EJ.CircularGauge id="gauge" mouseClickMove={mouseClickMove}></EJ.CircularGauge>, document.getElementById('gauge') function mouseClickMove(args) {}
|
Event: gaugeMouseLeave<CircularGaugeComponent id='circulargauge' gaugeMouseLeave={this.gaugeMouseLeave.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public gaugeMouseLeave(args: IMouseEventArgs): void {}
|
Mouseup Event |
Event: mouseClickUp<EJ.CircularGauge id="gauge" mouseClickUp={ mouseClickUp}></EJ.CircularGauge>, document.getElementById('gauge') function mouseClickUp(args) {}
|
Event: gaugeMouseUp<CircularGaugeComponent id='circulargauge' gaugeMouseUp={this.gaugeMouseUp.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public gaugeMouseUp(args: IMouseEventArgs): void {}
|
Pointerdrag Move Event |
Event: drawPointers<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>, document.getElementById('gauge') function drawpointers(args) {}
|
Event: dragMove<CircularGaugeComponent id='circulargauge' dragMove={this. dragMove.bind(this)}></CircularGaugeComponent>, document.getElementById('circulargauge')); public dragMove(args: IMouseEventArgs): void {}
|
Draw Range Event |
Event: drawRange<EJ.CircularGauge id="gauge" drawRange={drawRange}></EJ.CircularGauge>, document.getElementById('gauge') function drawRange(args) {}
|
Not Applicable |
Draw Ticks Event |
Event: drawTicks<EJ.CircularGauge id="gauge" drawTicks={drawTicks}></EJ.CircularGauge>, document.getElementById('gauge') function drawTicks(args) {}
|
Not Applicable |
Legend Render Event |
Event: legendItemRender<EJ.CircularGauge id="gauge" legendItemRender={ legendItemRender}></EJ.CircularGauge>, document.getElementById('gauge') function legendItemRender(args) {}
|
Not Applicable |
Right Click Event |
Event: rightClick<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>, document.getElementById('gauge') function drawpointers(args) {}
|
Not Applicable |
Double Click Event |
Event: doubleClick<EJ.CircularGauge id="gauge" drawpointers={drawpointers}></EJ.CircularGauge>, document.getElementById('gauge') function drawpointers(args) {}
|
Not Applicable |