[syncfusion_flutter_charts] Pie chart labels are not displayed when using builder

[s4k4tech]

Thanks for making such a nice package.
I am having trouble getting the label text to show up when using builder.
I attached screenshot and sample code.
From the screenshot you can see that 55555555555555 and 88888888888888 are not displayed.
I would appreciate it if you could help me with a solution.
Thank you in advance.

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class _ChartData {
  _ChartData(this.labelText, this.count, this.color);
  final String labelText;
  final int count;
  final Color color;
}

class Temp extends StatelessWidget {
  Temp({Key? key}) : super(key: key);

  final List<_ChartData> chartData = [
    _ChartData('11111111111111', 1, Colors.red),
    _ChartData('22222222222222', 1, Colors.blue),
    _ChartData('33333333333333', 1, Colors.yellow),
    _ChartData('44444444444444', 1, Colors.green),
    _ChartData('55555555555555', 1, Colors.orange),
    _ChartData('66666666666666', 1, Colors.purple),
    _ChartData('77777777777777', 1, Colors.pink),
    _ChartData('88888888888888', 1, Colors.brown),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SfCircularChart(
        margin: EdgeInsets.zero,
        series: <CircularSeries>[
          PieSeries<_ChartData, String>(
            dataSource: chartData,
            animationDuration: 0,
            pointColorMapper: (_ChartData data, _) => data.color,
            xValueMapper: (_ChartData data, _) => data.labelText,
            yValueMapper: (_ChartData data, _) => data.count,
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelIntersectAction: LabelIntersectAction.none,
              margin: EdgeInsets.zero,
              builder: (data, point, series, pointIndex, seriesIndex) {
                return Text(chartData[pointIndex].labelText);
              },
            ),
          ),
        ],
      ),
    );
  }
}

[Yuvaraj-Gajaraj]

Hi @sakatech-jp,

We suggest you use the dataLabelMapper in the PieSeries and map the text value, which you want to show as a data label in the pie chart. Now the data label will be visible as expected. We have attached the code snippet below to achieve your requirement.

Code snippet:

PieSeries<_ChartData, String>(
  dataSource: chartData,
  xValueMapper: (_ChartData1 data, _) => data.labelText,
  yValueMapper: (_ChartData1 data, _) => data.count,
  dataLabelMapper: (_ChartData1 data, _) => data.labelText,
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    labelIntersectAction: LabelIntersectAction.none,
  ),
  //Other required properties
)

If you have any further queries, please get back to us.

Regards,
Yuvaraj.

[s4k4tech]

@Yuvaraj-Gajaraj
Thank you for the reply.
I actually want to use builder to transform the data labels.
A simple sample code is attached.
Is there any way to solve this problem using builder?

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class _ChartData {
  _ChartData(this.labelText, this.count, this.color);
  final String labelText;
  final int count;
  final Color color;
}

class PieChart extends StatelessWidget {
  PieChart({Key? key}) : super(key: key);

  final List<_ChartData> chartData = [
    _ChartData('11111111111111', 1, Colors.red),
    _ChartData('22222222222222', 1, Colors.blue),
    _ChartData('33333333333333', 1, Colors.yellow),
    _ChartData('44444444444444', 1, Colors.green),
    _ChartData('55555555555555', 1, Colors.orange),
    _ChartData('66666666666666', 1, Colors.purple),
    _ChartData('77777777777777', 1, Colors.pink),
    _ChartData('88888888888888', 1, Colors.brown),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SfCircularChart(
        margin: EdgeInsets.zero,
        series: <CircularSeries>[
          PieSeries<_ChartData, String>(
            dataSource: chartData,
            animationDuration: 0,
            pointColorMapper: (_ChartData data, _) => data.color,
            xValueMapper: (_ChartData data, _) => data.labelText,
            yValueMapper: (_ChartData data, _) => data.count,
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelIntersectAction: LabelIntersectAction.none,
              margin: EdgeInsets.zero,
              builder: (data, point, series, pointIndex, seriesIndex) {
                return Transform.rotate(
                  angle: 2 / pi,
                  child: Text(chartData[pointIndex].labelText),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Hi @sakatech-jp,

You can achieve your requirement by setting the labelIntersection property to LabelInterSection.Shift. By doing this, the intersecting labels will be moved outside of the chart area and will display the data labels with connectorLineSettings. We have shared the code snippet, screenshot, and sample for your reference. Please let us know if you have any further needs.

Code snippet:

   PieSeries<_ChartData, String>(
            dataSource: chartData,
            animationDuration: 0,
            pointColorMapper: (_ChartData data, _) => data.color,
            xValueMapper: (_ChartData data, _) => data.labelText,
            yValueMapper: (_ChartData data, _) => data.count,
            dataLabelSettings: DataLabelSettings(
              isVisible: true,
              labelIntersectAction: LabelIntersectAction.shift,
              builder: (data, point, series, pointIndex, seriesIndex) {
                return Text(chartData[pointIndex].labelText);
              },
            ),
          ),

Screenshot:

Regards,
Lokesh P.

github_733.zip