I am using syncfusion_flutter_charts: 20.4.44
I am trying to represent dynamic data with six categories using a DonutSeries. I have customized dataLabels using the builder in dataLabelSettings. The issue I am facing is that some of the data labels are not showing up on the chart. Reducing the chart radius from 55% to 45% are showing more labels. But still in cases a label gets hidden.
Below is the chart with the same setting but different sets of data. As you can see one label is hidden in the second set of data. As I want to make the labels clickable It will be a big problem if they are hidden sporadically. Maybe there is an optimal chart size/ data label size settings that would resolve the issue? Looking forward to your guidance.
The Chart code is as below
class DonutGraphic extends StatelessWidget {
DonutGraphic({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Slices slices = Provider.of<Slices>(context);
return SfCircularChart(
margin: EdgeInsets.zero,
backgroundColor: Colors.green.shade50,
borderColor: Colors.red,
borderWidth: 2.0,
annotations: [
CircularChartAnnotation(
widget: AmountLabel(
amt: NumberFormat.currency(symbol: '', decimalDigits: 2)
.format(slices.totalExpense)
.split('.'),
fontSizeWhole: 18),
)
],
series: [
DoughnutSeries<ChartData, String>(
dataSource: slices.donutData,
xValueMapper: (ChartData datum, _) => datum.title,
yValueMapper: (ChartData datum, _) => datum.amount,
pointColorMapper: (ChartData datum, _) => datum.color,
radius: '45%',
innerRadius: '70%',
dataLabelSettings: DataLabelSettings(
margin: EdgeInsets.zero,
connectorLineSettings: ConnectorLineSettings(
length: '20%', type: ConnectorType.curve),
isVisible: true,
labelPosition: ChartDataLabelPosition.outside,
overflowMode: OverflowMode.shift,
labelIntersectAction: LabelIntersectAction.shift,
builder: (data, point, series, pointIndex, seriesIndex) {
final amt = NumberFormat.currency(symbol: '', decimalDigits: 2)
.format(
data.amount,
)
.split('.');
print('data:${data.amount}');
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(width: 24, height: 24, color: Colors.green),
AmountLabel(amt: amt, fontSizeWhole: 12),
],
);
},
)),
],
);
}
}
AmountLabel widget code is as below
class AmountLabel extends StatelessWidget {
const AmountLabel({required this.amt, this.fontSizeWhole, Key? key})
: super(key: key);
final List<String> amt;
final double? fontSizeWhole;
//fontSizeCurrency:fontSizeWhole:fontSizeDecimal -- 4:6:5 --
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(NumberFormat().simpleCurrencySymbol('PKR'),
style: TextStyle(
fontSize: (fontSizeWhole! * 4.0 / 6.0),
fontWeight: FontWeight.w300,
)),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Text('${amt[0]}',
style: TextStyle(
fontSize: fontSizeWhole,
fontWeight: FontWeight.w300,
)),
Text(
'.${amt[1]}',
style: TextStyle(
fontSize: fontSizeWhole! * 5.0 / 6.0,
fontWeight: FontWeight.w300,
),
),
],
),
],
);
}
}
Hi Arjumand,
In a circular chart, if data labels collide, they are moved and placed in an available area. If there is no available space, the data labels will be hidden. To meet your requirements, we suggest increasing the length of the connector line in the data label settings. This will help prevent the data labels from colliding and being hidden. We have shared the code snippet below for your reference.
Code snippet:
dataLabelSettings: DataLabelSettings( connectorLineSettings: const ConnectorLineSettings( length: '30%', type: ConnectorType.curve), ) |
Screenshot:
Regards,
Yuvaraj.
Its working smoothly with longer connector lines. Thank you.
Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.