Gauge Position
12 May 2017 / 2 minutes to read
Semi-circular Gauge can be positioned within the canvas element which provides better appearance for the gauge in the canvas.
Positioning
Semi-circular Gauge can be positioned with the help of the attribute called gaugePosition. It is an enumerable value. You can position the gauge away from the corner with the help of the distanceFromCorner attribute.
The possible enum values for the gaugePosition are as follows:
-
Topleft
-
Topcenter
-
Topright
-
Middleleft
-
Center
-
Middleright
-
Bottomleft
-
Bottomcenter
-
Bottomright
<div style="float: left" id="gauge1"></div>
<div id=" CoreCircularGaugehalfright "></div>
"use strict";
var scales= [{
startAngle: 270,
sweepAngle: 180,
radius: 160,
showScaleBar: true,
size: 1,
maximum: 120,
majorIntervalValue: 20,
minorIntervalValue: 10,
border: {
width: 0.5,
}
}];
var frame= {
frameType: 'halfcircle',
halfCircleFrameStartAngle: 270,
halfCircleFrameEndAngle: 90
};
ReactDOM.render(
<EJ.CircularGauge id="default" width={800} height={500} radius={120} value={60} backgroundColor="transparent" scales={scales} distanceFromCorner={30} frame={frame}
// To set the gauge position.
gaugePosition="center"
>
</EJ.CircularGauge>,
document.getElementById('circulargauge')
);
Execute the above code to render the following output.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page