RadialBarSeries with rounded ends looks ugly when some legends are hidden

[Abhijit-Revamp]

Bug description

Hiding points (via legends) in a RadialBarSeries with circular ends looks ugly when only 1 or 2 are visible.

Not sure if setting "maximumValue" on RadialBarSeries has more impact,

The shape becomes thick and looks bad when
cornerStyle: CornerStyle.bothCurve,
or
cornerStyle: CornerStyle.endCurve,

See the attached images

You can reproduce this in the samples:

1. Open https://flutter.syncfusion.com
2. Navigate to Circular chart -> Radial Bar
3. Inside Radial Bar sample, select the option with Legend (activity tracker)
4. Hide 2 of the 3 points

Steps to reproduce

1. create RadialBarSeries
2. in Data have lot of points (say 10)
3. Add legends with toggleSeriesVisibility=true
4. Now of the 10 values, hide 8 or 9

Code sample

Code sample

[Add your code here]

Screenshots or Video

Screenshots / Video demonstration

All points visible

---

With only 1 point visible

---

Same with `cornerStyle: CornerStyle.bothCurve`

---

One more

Stack Traces

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[Add your output here]

[Baranibharathip]

Hi @Abhijit-Revamp,

We have validated your query and would like to inform you that in the RadialBarSeries, the segment ring size is calculated based on the number of visible data points, radius and widget available size. When the legend is toggled, the remaining segments will always expand to fill the entire radial bar space. This is the default behavior of the RadialBarSeries. To reduce the outer radius of the series, we recommend adjusting the radius settings, which will modify the default radius of the RadialBarSeries.

For more details about radius, refer to the following UserGuide link.
Radial bar chart: https://help.syncfusion.com/flutter/circular-charts/chart-types/radial-bar-chart#changing-the-radial-bar-size

Regards,
Baranibharathi P.

[Abhijit-Revamp]

@Baranibharathip Thanks. I had a look at that. However my data is dynamic and so are my legends.
I have already set the radius and inner radius, however when the labels hide, tracking the radius and calculating the values will be extremely tricky.
is it possible to have a flag (as an ENHANCEMENT) to keep the size of each element impact

[Baranibharathip]

Hi @Abhijit-Revamp,

We have validated your query and we would like to inform you that We have achieved your requirement using a workaround sample. In the sample, we dynamically update the inner radius of the radial bar series by checking the visible segment count in the onLegendTapped callback. We have shared code snippet and demo for your reference.

void _onLegendTapped(LegendTapArgs args) {
    setState(() {
      if (activeIndices.contains(args.pointIndex)) {
        activeIndices.remove(args.pointIndex);
      } else {
        activeIndices.add(args.pointIndex!);
      }
    });
  }
 double _calculateInnerRadius() {
    int count = activeIndices.length;
    double minRadius = 0.5;
    double maxIncrease = 0.4;
    double radiusIncrease = maxIncrease * ((data.length - count) / data.length);
    double innerRadius = minRadius + radiusIncrease;
    return innerRadius.clamp(minRadius, minRadius + maxIncrease);
  }
  @override
  Widget build(BuildContext context) {
  return SfCircularChart(
          onLegendTapped: _onLegendTapped,
          legend: const Legend(isVisible: true, isResponsive: true),
          series: <RadialBarSeries<_ChartData, String>>[
            RadialBarSeries<_ChartData, String>(
              dataSource: data,
              xValueMapper: (_ChartData data, _) => data.x,
              yValueMapper: (_ChartData data, _) => data.y,
              innerRadius: '${_calculateInnerRadius() * 100}%',
            ),
          ),

Demo:

Recording.2025-01-27.112524.mp4

Sample: GH_2105.zip

Regards,
Baranibharathi P.

[LavanyaGowtham2021]

Please open this issue, if you need further assistance on this.