feat: pie chart rounded corners

[Vizten18]

fixes: #1175

Summary

Add the ability to apply rounded corners to individual pie chart sections using a simple cornerRadius parameter.

Motivation

Currently, fl_chart pie charts only support sharp corners for sections. Many modern UI designs require rounded corners for a softer, more polished appearance. This feature would allow developers to create more visually appealing pie charts that match contemporary design trends.

Proposed Solution

Add a cornerRadius property to PieChartSectionData that allows developers to specify the radius for rounding the corners of individual pie chart sections.

Expected API

PieChartSectionData(
  value: 25,
  color: Colors.blue,
  cornerRadius: 8.0, // New parameter
  // ... other existing parameters
)

##  Visual Improvements
- Smoother, more modern appearance
- Consistent with Material Design 3 principles
- Eliminates sharp edges for better visual hierarchy

##  Documentation
- Comprehensive method documentation with behavior notes
- Inline comments explaining clamping logic and geometric calculations
- Platform compatibility notes (web-html renderer caveats)

[imaNNeo]

Is this functionality intended? There's a maximum limit for the radius in this case:

CleanShot.2025-10-26.at.00.37.38.mp4

[Vizten18]

Is this functionality intended? There's a maximum limit for the radius in this case:

CleanShot.2025-10-26.at.00.37.38.mp4

The cornerRadius value is internally clamped inside generateRoundedSectionPath(). Even if a large value is passed (e.g. 40000), it gets limited by:

min(section.radius * 0.3, sweepRadians * outerRadius * 0.15)

This means the actual corner radius can’t exceed 30% of the section radius or 15% of the arc length, whichever is smaller.
It’s done intentionally to avoid visual distortion or path self-intersection when slices are narrow.

[TijnvandenEijnde]

@Vizten18 Thank you so much for picking this up!

I just tried out your branch, and it is working great up to a value of 15 for donut charts:

This is the code I used:

PieChart(
  PieChartData(
    startDegreeOffset: -90,
    sections: [
      PieChartSectionData(
        cornerRadius: 15,
        titleStyle: titleStyle,
        value: 70,
        color: colorScheme.success,
        title: '70%',
        radius: 50,
      ),
      PieChartSectionData(
        cornerRadius: 15,
        titleStyle: titleStyle,
        value: 20,
        color: colorScheme.error,
        title: '20%',
        radius: 50,
      ),
      PieChartSectionData(
        cornerRadius: 15,
        titleStyle: titleStyle,
        value: 10,
        color: colorScheme.leave,
        title: '10%',
        radius: 50,
      ),
    ],
  ),
)

Afterwards, it seems the corner radius is only applied to the corners facing inwards:

It also doesn't pick up any values higher than 40.

[imaNNeo]

Can we fix the green part issue? It feels off to me.

[imaNNeo]

There was some work on #2040 about this topic. I just closed that one to have only 1 PR for pie chart rounded corners.
That would be nice if you have a look and get some idea if you want.

[Vizten18]

@imaNNeo Fixed an issue where smaller pie chart sections appeared sharper than larger ones despite having the same cornerRadius.

Previously, the corner radius was artificially clamped to 15% of the arc length and 30% of the section thickness. This premature clamping prevented smaller sections from reaching the requested radius.

By updating the clamping limits to 0.499 (allowing the corners to safely occupy up to almost 50% of the available space without overlapping), all sections can now achieve the requested cornerRadius, resulting in a uniform and consistent rounded appearance across the entire chart.

[codecov]

Codecov Report

❌ Patch coverage is 95.04132% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.61%. Comparing base (32e75f5) to head (93416ee).
⚠️ Report is 16 commits behind head on main.

Files with missing lines	Patch %	Lines
lib/src/chart/pie_chart/pie_chart_painter.dart	95.04%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2024      +/-   ##
==========================================
+ Coverage   92.49%   92.61%   +0.12%     
==========================================
  Files          50       50              
  Lines        3731     3873     +142     
==========================================
+ Hits         3451     3587     +136     
- Misses        280      286       +6     

Flag	Coverage Δ
flutter	92.61% <95.04%> (+0.12%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[imaNNeo]

PR Review: Rounded Corners for Pie Chart (#2024)

This is a fantastic addition to the library. The geometric logic for rounding both inner and outer corners (especially for donut charts) is well-handled. The clamping logic is robust and ensures segments remain visually stable even when narrow.

Here are a few suggestions to further polish the implementation:

1. Optimization: Redundant Path Construction

In pie_chart_painter.dart, the generateSectionPath method currently performs redundant work when cornerRadius > 0. It builds a standard path first and then builds a rounded one from scratch.
Suggestion: Wrap the standard path logic in an else block to skip it when rounding is active.

2. Geometry: Consistent Section Spacing

The "sharp" path uses a subtraction method that preserves a constant linear gap (parallel lines) between sections. The rounded path currently uses a fixed angular offset, which creates a slight "V" shaped gap (narrower at the center, wider at the edge). While subtle, maintaining a constant linear width would ensure consistency across both modes.

3. Safety: Negative Radius Guard

In the PieChartSectionData constructor, consider clamping cornerRadius to prevent negative values:

cornerRadius = (cornerRadius ?? 0.0).clamp(0, double.infinity),

4. Magic Numbers

In generateRoundedSectionPath, the 0.499 multiplier used for clamping is a clever way to avoid rendering artifacts from overlapping segments. Adding a quick comment or a private named constant like _kRadiusSafetyMargin would help future maintainers understand the choice of 0.499 vs 0.5.

Overall, this is a solid PR that addresses a major feature request with high-quality geometry logic. Great work!

[imaNNeo]

@Vizten18 I'm playing around with Antigravity to see if it can help me to speed up my work here in fl_chart.
So I wanted to let you know that the above comment is an AI-generated comment (but I already checked that before allowing it to post random comments here).

Feel free to have a look to see if you can improve that.
Thanks for your collaboration!

[Vizten18]

@imaNNeo

the last commit has the following changes:

• Paths are now generated via a single if/else branch, avoiding redundant standard+rounded path work.
• Section spacing for rounded slices is applied with parallel radial cuts to keep separator geometry consistent.
• radius and cornerRadius inputs are clamped to non-negative values in PieChartSectionData for safer defaults.
• The 0.499 safety value is now a named constant (_kRadiusSafetyMargin) for readability and maintainability.

[imaNNeo]

Perfect!
Now it looks good to me and is ready to get merged.

There are only two things before the merge:

1. Please write some unit-tests for it (you can use AI and check it before finalizing it)
2. Please add the new property in the pie_chart.md file

[Vizten18]

• Added integration unit tests for pie chart sections using cornerRadius
• pie_chart.md updated

All Pie Chart Tests passed with success

@imaNNeo

[imaNNeo]

Thanks for your quick response and collaboration!
I appreciate it.

[Vizten18]

Thanks to you for this lovable package, was a plessure to contribute on this feat ^^

[imaNNeo]

There are some parts that are not covered. That's why some parts are failed.
You can check it here.

Can you make sure everything is covered?

[Vizten18]

@imaNNeo Lets try again

[imaNNeo]

Thanks for your contribution!