We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Some data labels are not showing

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,
),
),
],
),
],
);
}
}





3 Replies

YG Yuvaraj Gajaraj Syncfusion Team March 8, 2023 01:50 PM UTC

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.



AK Arjumand Khan March 10, 2023 04:25 AM UTC

Its working smoothly with longer connector lines.  Thank you.



YG Yuvaraj Gajaraj Syncfusion Team March 13, 2023 08:51 AM UTC

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.


Loader.
Up arrow icon