format peichart label
Hello,
How can I format the percentage display to 97.6%?
series: <CircularSeries>[
PieSeries<_Data, String>(
enableTooltip: true,
strokeWidth: 1,
strokeColor: Colors.blueAccent,
dataSource: caseContributionInGMSData,
xValueMapper: (_Data data, _) =>
data.country,
yValueMapper: (_Data data, _) =>
data.value,
animationDelay: 700,
dataLabelMapper: (_Data data, _) =>
"${data.percentage}%",
dataLabelSettings: const DataLabelSettings(
isVisible: true,
showZeroValue: false,
labelPosition: ChartDataLabelPosition.inside,
textStyle: TextStyle(
color: Colors.black,
fontSize: 12,
backgroundColor: Colors.amberAccent)),
radius: '100%',
),
Best regards,
Sao
Hi Sao,
You can achieve the mentioned requirement by converting the text provided to the dataLabelMapper property into string by allowing only one decimal point using the toStringAsFixed method as shown in the code snippet below.
|
class MainApp extends StatefulWidget { const MainApp({super.key});
@override State<MainApp> createState() => _MainAppState(); }
class _MainAppState extends State<MainApp> { late List<_Data> caseContributionInGMSData;
@override void initState() { caseContributionInGMSData = <_Data>[ _Data( country: 'India', value: 500, color: Colors.lightBlueAccent, percentage: 95.0876715230185, ), _Data( country: 'America', value: 100, color: Colors.deepOrangeAccent, percentage: 7.134327100046363, ), _Data( country: 'China', value: 10, color: Colors.indigo, percentage: 0.3186073706839205, ), _Data( country: 'Russia', value: 60, color: Colors.green, percentage: 97.56860857005296, ), _Data( country: 'Brazil', value: 30, color: Colors.pinkAccent, percentage: 36.03326147212812, ), ]; super.initState(); }
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SfCircularChart( series: <CircularSeries>[ PieSeries<_Data, String>( enableTooltip: true, strokeWidth: 1, startAngle: 50, endAngle: 50, strokeColor: Colors.blueAccent, dataSource: caseContributionInGMSData, xValueMapper: (_Data data, _) => data.country, yValueMapper: (_Data data, _) => data.value, pointColorMapper: (_Data data, _) => data.color, animationDelay: 700, dataLabelMapper: (_Data data, _) => '${data.percentage!.toStringAsFixed(1)} %', dataLabelSettings: const DataLabelSettings( isVisible: true, showZeroValue: false, labelPosition: ChartDataLabelPosition.inside, textStyle: TextStyle( color: Colors.black, fontSize: 12, backgroundColor: Colors.amberAccent, ), ), radius: '100%', ), ], ), ), ); } }
class _Data { final String country; final num value; final Color? color; final double? percentage;
_Data({ required this.country, required this.value, this.color, this.percentage, }); } |
Snapshot:
If you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K.
