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.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')); |
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')); |
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')); |
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')); |
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 |
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')); |
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')); |
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')); |
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')); |
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')); |
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 |