Labels are overlapping in Syncfusion's flutter Doughnut chart

Question

I have a categorization doughnut chart, where I display labels for each category fraction. The problem is that the labels are overlapping each other if the portion on the chart is very small.

If I set labelIntersectAction: LabelIntersectAction.hide,, most of the labels are not visible (See in the 2nd screenshot), which left the user wondering about the categorization.

Here is my code:

     DoughnutSeries<ExpenseCategoryChartData, String>(
        dataSource: _chartData,
        radius: '65%',
        innerRadius: '75%',
        opacity: 0.5,
        pointColorMapper: (ExpenseCategoryChartData data, _) =>
            data.bgColor,
        xValueMapper: (ExpenseCategoryChartData data, _) => '${data.x}',
        yValueMapper: (ExpenseCategoryChartData data, _) => data.y,
        enableSmartLabels: true,
        enableTooltip: true,
        sortingOrder: SortingOrder.ascending,
        dataLabelMapper: (data, __) => '${data.x}',
        dataLabelSettings: DataLabelSettings(
          // Renders the data label
          isVisible: true,
          labelIntersectAction: LabelIntersectAction.none,
          labelAlignment: ChartDataLabelAlignment.top,
          connectorLineSettings: ConnectorLineSettings(
            length: '10',
            type: ConnectorType.curve,
            width: 2,
          ),
          labelPosition: ChartDataLabelPosition.outside,
        ),
      ),

Solution

While setting labelIntersectAction value as hide, the labels which are overlapped each other will be hidden and also the labels which exceeds the chart area bounds will also be hidden.

Screenshot #1

So for your scenario to show the label which exceeds the bounds, either you can set the margin property value as 0 (for example margin: const EdgeInsets.all(0)) or else you has to reduce the radius of the chart.

Please refer the below code snippet below.

return Container(
margin: const EdgeInsets.all(0),
child: SfCircularChart(
  series: <CircularSeries>[
    DoughnutSeries<ChartData, String>(
      dataSource: chartData,
      radius: '50%',
      innerRadius: '75%',
      opacity: 0.5,
      pointColorMapper: (ChartData data, _) => data.color,
      xValueMapper: (ChartData data, _) => '${data.x}',
      yValueMapper: (ChartData data, _) => data.y,
      enableSmartLabels: true,
      enableTooltip: true,
      sortingOrder: SortingOrder.ascending,
      dataLabelMapper: (data, __) => '${data.x}',
      dataLabelSettings: DataLabelSettings(
        isVisible: true,
        labelIntersectAction: LabelIntersectAction.hide,
        labelAlignment: ChartDataLabelAlignment.top,
        connectorLineSettings: ConnectorLineSettings(
          length: '10',
          type: ConnectorType.curve,
          width: 2,
        ),
        labelPosition: ChartDataLabelPosition.outside,
      ),
    ),
  ],
 ),
);

Screenshot #2

Comments

[Yashwardhan Pauranik]

I removed some margins, it did fix things for my screen, but it is not a solution I was looking for.