syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.
Other
1.98k stars 775 forks source link

Semi-doughnut chart label issue being cut off and off the screen. #845

Closed rabismail closed 9 months ago

rabismail commented 9 months ago

sdk: '>=3.0.0 <4.0.0' (flutter beta) syncfusion_flutter_charts: ^24.1.45

Consider the sample provided default_doughnut_chart.dart

And by modifying the sample code to be as follow:

  class SemiDoughnutChart extends StatelessWidget {

  const SemiDoughnutChart({super.key});

  /// Return the circular chart with default doughnut series.
  SfCircularChart _buildDefaultDoughnutChart() => SfCircularChart(
        title: const ChartTitle(text: 'Composition of ocean water'),
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 0),
        series: _getDefaultDoughnutSeries(),
        tooltipBehavior: TooltipBehavior(enable: true, format: 'point.x : point.y%'),
      );

  /// Returns the doughnut series which need to be render.
  List<DoughnutSeries<ChartSampleData, String>> _getDefaultDoughnutSeries() =>
      <DoughnutSeries<ChartSampleData, String>>[
        DoughnutSeries<ChartSampleData, String>(
          explode: true,
          dataSource: <ChartSampleData>[
            ChartSampleData(x: 'Chlorine', y: 11, text: '4.5%'),
            ChartSampleData(x: 'Sodium', y: 235, text: '95.5%'),
          ],
          xValueMapper: (ChartSampleData data, _) => data.x as String,
          yValueMapper: (ChartSampleData data, _) => data.y,
          dataLabelMapper: (ChartSampleData data, _) => "${data.text}\n${data.y}",
          startAngle: 250,
          endAngle: 110,
          radius: '95%',
          innerRadius: '70%',
          dataLabelSettings: const DataLabelSettings(
            isVisible: true,
            labelPosition: ChartDataLabelPosition.outside,
            labelIntersectAction: LabelIntersectAction.none,
          ),
        ),
      ];

  @override
  Widget build(BuildContext context) => Card.filled(
        child: _buildDefaultDoughnutChart(),
      );
}
image

Check also this:

image

I know that decreasing radius from '95%' to '70%' will solve the issue, but the lib should be able to handle this automatically...

ghost commented 9 months ago

Hi @rabismail,

We have validated and analyzed the reported issue ‘Data label is cropping with plot area bounds edge’ at our end. As per the chart behavior, data label should be rendered with in the plot area bounds and it’s the correct behavior. Previous (23.1) versions data label edge detection behavior is considered with chart area and its wrong, so we have corrected this behavior in volume 4 main release (24.1).

https://www.syncfusion.com/feedback/42028

We have already logged the FR for ‘Improve the data label positioning based on the available place’ and we will consider your case with this feature request. This feature will be available in any of our upcoming releases.

If you have any additional specifications or suggestions for this feature request, please feel free to leave them in the comments section of the feedback link. This will help us to understand how you would like to use it and how we can improve it.

Regards, Lokesh P.