CODEWITHSUNDEEP
fluttersyncfusion
Yashwardhan Pauranik
Yashwardhan Pauranik

Reputation: 5556

Labels are overlapping in Syncfusion's flutter Doughnut chart

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,
        ),
      ),

enter image description here enter image description here

Upvotes: 4

Views: 1356

Answers (1)

Rokesh Dk
Rokesh Dk

Reputation: 21

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

Upvotes: 2

Related Questions