[syncfusion_flutter_charts] Could you please confirm if syncfusion_flutter_charts supports highlighting the selected element with rounded corners and animation, as illustrated in the example below?

[gltiennd]

illustrative example: https://dribbble.com/shots/19183962-Wallet-App

[Vallarasu4653]

Hi @gltiennd,

Thank you for reaching out to us.

The Flutter Doughnut Chart currently supports features such as exploding segments and rounded corners. However, it does not provide built-in support for custom animations to explode selected elements at this time. The animationDuration and animationDelay properties apply to the entire series rather than individual selected segments.

For more details, please refer to our official documentation and demos using the links below:

Rounded Corners Support in Doughnut Chart in Flutter Circular Charts widget | Syncfusion
Exploding a segment in Doughnut Chart in Flutter Circular Charts widget | Syncfusion
Sample Browser Demo for Circular Charts

If you have any further questions or need assistance with alternative approaches, please feel free to let us know.

Regards,
Vallarasu R.

[gltiennd]

@Vallarasu4653 Hi Vallarasu,

Thank you for the clarification and the detailed explanation.

We understand the current limitations of the Flutter Doughnut Chart regarding animations on individual selected segments. However, this feature (highlighting or exploding a selected segment with custom animation and rounded corners) is quite important for our user experience.

Could you please let us know whether this capability is planned or being considered for future releases of syncfusion_flutter_charts? This information would help us decide whether to wait for an official solution or implement an alternative approach in our application.

Thank you very much for your support and guidance.

Best regards,
Nguyễn Duy Tiến

[AswiniDileep]

Hi gltiennd,

We have analyzed your requirement, and currently, we don't have direct support for achieving rendering an exploded doughnut segment with corner radius and animation. As a workaround, we implemented explosion and corner radius entirely in the custom DoughnutSegment renderer, that handles the explode effect, rounded corners, and drawing each segment. The default explode feature is turned off.

Animation is done using AnimationController and AnimatedBuilder. When a segment is tapped, we mark its index and animate both the explode movement and the corner rounding together.

Code snippet for reference:

…
@override
void onPaint(Canvas canvas) {
  final bool isExploded = currentSegmentIndex == explodedIndex;
  final Paint paint = getFillPaint();
 
  final double maxExplode = 30.0;
  final double maxCorner = 8.0;
 
  final double explodeDistance = isExploded ? maxExplode * animationValue : 0.0;
  final double midAngle = (startAngle + endAngle) / 2;
  final double midRad = midAngle * (pi / 180);
 
  final Offset explodeOffset = Offset(cos(midRad) * explodeDistance, sin(midRad) * explodeDistance);
  final Offset adjustedCenter = Offset(series.center.dx + explodeOffset.dx, series.center.dy + explodeOffset.dy);
 
  final double cornerRadius = isExploded ? maxCorner * animationValue : 0.0;
 
  fillPath = calculateRoundedCornerArcPath(
    series.currentInnerRadius,
    series.currentRadius,
    adjustedCenter,
    startAngle,
    endAngle,
    cornerRadius,
  );
 
  canvas.drawPath(fillPath, paint);
}
…

We would like to let you know that we not encourage using workaround solution, we are generated this solution only to achieve your requirement, if any further changes required, it will be considering as uncertain feature request. We have attached the sample and demo below for your reference. Please check and get back to us if you require further assistance.

Sample: gh_2491.zip

Demo:

Regards,
Aswini S