Piechart customization
Hi Arnold Rafi,
To position the gauge, use the startAngle and endAngle properties of SfRadialGauge. These control where the gauge arc begins and ends. To position the WidgetPointer, use the value property, which places the pointer along the arc based on the specified value. In this sample, we’ve set both startAngle and endAngle to 0, which positions the gauge arc on the right side of the circle. The WidgetPointer is set with a value of 0, so it appears exactly at the start of the arc on the right.
You can control the gauge’s position using the startAngle and endAngle properties of SfRadialGauge. For example:
- Setting both to 90 positions the gauge to start from the bottom.
- Setting both to 180 starts it from the left center.
- Setting both to 270 starts it from the top.
- Setting both to 0 or 360 starts it from the right center.
Additionally, we noticed that dragging is disabled for the pointer, but the onValueChanged callback is still being used. We suspect that you're trying to update the gauge value using another input method. To support this, we’ve added an SfSlider below the gauge in the sample. This slider updates the gauge’s range dynamically, while the pointer remains fixed at the start position.
Code snippet:
|
SfRadialGauge( axes: <RadialAxis>[ RadialAxis( startAngle: 0, endAngle: 0, pointers: <GaugePointer>[ WidgetPointer( value: _startValue, enableDragging: false, child: CircleAvatar( radius: 20, child: Stack( alignment: Alignment.center, children: [ Image.asset( 'assets/ball_progressbar.png', width: 40, height: 40, fit: BoxFit.fill, ), Text( _endValue.toStringAsFixed(0), style: const TextStyle( color: Colors.red, fontSize: 18, fontWeight: FontWeight.bold, ), ), ], ), ), ), ], ), ], ), |
We have shared the
sample for your reference, and you can customize it according to your needs. If
you are still not satisfied with the sample, we kindly request you to share us
with more information on your requirement in detail along with screenshots/screen
recordings so that it will help us assist you in a better way.
Best regards,
Mugunthan.
Attachment: forum_197244_cbccf338.zip
Here is the image. If you can see the text is now outside the guage and inside the guage respectively. How can i do this according to the position of the guage.
here is the code as well which i am using for the design currently for both the start value and the guage values.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
showLabels: false,
showTicks: false,
startAngle: 270,
endAngle: 270,
radiusFactor: 0.8,
axisLineStyle: const AxisLineStyle(
thickness: 0.1,
thicknessUnit: GaugeSizeUnit.factor,
),
pointers: <GaugePointer>[
RangePointer(
value: value,
width: 0.1,
sizeUnit: GaugeSizeUnit.factor,
color: color,
gradient: SweepGradient(
colors: <Color>[color, color],
stops: <double>[0.5, 1],
),
),
// Label showing the "share" percentage (placed at center)
WidgetPointer(
value: 0,
enableDragging: false,
child: Text(
value != 0 ? "${(share).toStringAsFixed(1)}%" : '',
style: TextStyle(color: Colors.white, fontSize: 8),
),
),
// Moving circle showing current value %
WidgetPointer(
value: value,
enableDragging: false,
child: CircleAvatar(
backgroundColor: color,
radius: 6,
child: Text(
"${value.toStringAsFixed(1)}%",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 4),
),
),
),
],
),
],
)
Hi Arnold Rafi,
To position text inside or outside the gauge, use GaugeAnnotationwithin SfRadialGauge.
Key Properties:
angle: Specifies the angular position of the annotation around the gauge. Here, the angle property is converted from the current selected gauge value.
positionFactor: Determines the radial distance from the center.
A value greater than 1 places the annotation outside the gauge ring.
A value less than 1 places the annotation inside the gauge ring.
double _valueToAngle(double value, double axisMin, double axisMax) { final sweep = (_endAngleDeg - _startAngleDeg) % 360 == 0 ? 360 : (_endAngleDeg - _startAngleDeg);
return _startAngleDeg + (value - axisMin) * sweep / (axisMax - axisMin); }
final double startLabelAngle = _valueToAngle(_startValue, _outerAxisMin, _outerAxisMax); final double endLabelAngle = _valueToAngle(_endValue, _outerAxisMin, _outerAxisMax); |
annotations: <GaugeAnnotation>[ // OUTER Start label OUTSIDE GaugeAnnotation( widget: Text( '${_startValue.toStringAsFixed(0)}%', style: const TextStyle( fontSize: 14, fontWeight: FontWeight.w600, ), ), angle: startLabelAngle, positionFactor: 1.2, // outside ring ), // OUTER End label OUTSIDE GaugeAnnotation( widget: Text( '${_endValue.toStringAsFixed(0)}%', style: const TextStyle( fontSize: 14, fontWeight: FontWeight.w600, ), ), angle: endLabelAngle, positionFactor: 1.2, // outside ring ), ],
|
For more details, refer to the official documentation: Annotation in Flutter Radial Gauge widget | Syncfusion
Please feel free to reach out if you need any further assistance.
Regards,
Harsha.
Attachment: forum_197244_51555741.zip
I am unable to find the values for these angles. Can you be more specific about how to get these . i will send you the complete widget code. And also i am calling it like this.
_buildSliderWithCircle(
widget.plan.currentFreedomShareROIPCT?.toDouble() ?? 0,
(((widget.plan.roiValue ?? 1) /
(widget.plan.currentCustomerShareROIPCT ?? 1)) *
(widget.plan.freedomShare ?? 0))
.toDouble(),
75,
AppC.primary,
)
Widget _buildSliderWithCircle(
double value, double share, double size, Color color)
{
return SizedBox(
height: size,
width: size,
child: SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
showLabels: false,
showTicks: false,
startAngle: 270,
endAngle: 270,
radiusFactor: 0.8,
axisLineStyle: const AxisLineStyle(
thickness: 0.1,
thicknessUnit: GaugeSizeUnit.factor,
),
annotations:<GaugeAnnotation> [ // OUTER Start label OUTSIDE
GaugeAnnotation(
widget: Text(
'${value.toStringAsFixed(0)}%',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
angle: startLabelAngle,
positionFactor: 1.2, // outside ring
),
// OUTER End label OUTSIDE
GaugeAnnotation(
widget: Text(
'${share.toStringAsFixed(0)}%',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
angle: endLabelAngle,
positionFactor: 1.2, // outside ring
),],
pointers: <GaugePointer>[
RangePointer(
value: value,
width: 0.1,
sizeUnit: GaugeSizeUnit.factor,
color: color,
gradient: SweepGradient(
colors: <Color>[color, color],
stops: <double>[0.5, 1],
),
),
// Label showing the "share" percentage (placed at center)
// WidgetPointer(
// value: 0,
// enableDragging: false,
// child: Text(
// value != 0 ? "${(share).toStringAsFixed(1)}%" : '',
// style: TextStyle(color: Colors.white, fontSize: 8),
// ),
// ),
//
// // Moving circle showing current value %
// WidgetPointer(
// value: value,
// enableDragging: false,
// child: CircleAvatar(
// backgroundColor: color,
// radius: 6,
// child: Text(
// "${value.toStringAsFixed(1)}%",
// textAlign: TextAlign.center,
// style: TextStyle(color: Colors.white, fontSize: 4),
// ),
// ),
// ),
],
),
],
),
);
}
