Reverse label order

[Welnnys]

Use case

I want to reverse the label order without reversing the circles ( my chart ) order. I tried a few things and nothing worked out so I am not entirely sure if this is possible or not.

Proposal

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

class OverviewPage extends StatefulWidget {
const OverviewPage({Key? key}) : super(key: key);

@OverRide
_OverviewPageState createState() => _OverviewPageState();
}

class _OverviewPageState extends State {
bool showTotalActivityTime = false;

@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Overview',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
automaticallyImplyLeading: false, // Removes the go back arrow
),
body: Center(
child: Column(
children: [
ElevatedButton(
onPressed: () {
setState(() {
showTotalActivityTime = !showTotalActivityTime;
});
},
child: Text(showTotalActivityTime ? 'Show Activity Counts' : 'Show Total Activity Time'),
),
Expanded(
child: FutureBuilder<List>(
future: showTotalActivityTime ? fetchTotalActivityTime() : fetchActivityCounts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
return SizedBox(
height: 300, // Adjust height as needed
width: double.infinity, // Take full width
child: SfCircularChart(
legend: Legend(isVisible: true, position: LegendPosition.right), // Move legend to the right
series: [
RadialBarSeries<ChartData, String>(
dataSource: snapshot.data!,
xValueMapper: (ChartData data, _) => data.category,
yValueMapper: (ChartData data, _) => data.value,
dataLabelMapper: (ChartData data, _) => data.formattedTime,
dataLabelSettings: const DataLabelSettings(isVisible: true),
// Adjust the thickness of the circle lines
trackBorderWidth: 2, // Adjust this value to make the circle lines thinner or thicker
// Adjust the space between each circle
gap: '17%', // Adjust this value to add space between the circles
// Adjust the thickness of the circles
innerRadius: '10%', // Adjust this value to make the circles thinner or thicker
)
],
),
);
}
},
),
),
],
),
),
);
}

Future<List> fetchActivityCounts() async {
final userUID = FirebaseAuth.instance.currentUser?.uid;
if (userUID != null) {
final now = DateTime.now();
final currentMonthYear = DateFormat('MM-yyyy').format(now);

final querySnapshot = await FirebaseFirestore.instance
    .collection('users')
    .doc(userUID)
    .collection(currentMonthYear)
    .where('ActivityName', isNotEqualTo: null)
    .where('ActivityName', isNotEqualTo: 'placeholder')
    .get();

if (querySnapshot.docs.isEmpty) {
  // Return example chart data if no records are found
  return generateExampleChartData();
}

// Aggregate count of records for each activity
Map<String, int> activityCounts = {};
for (var doc in querySnapshot.docs) {
  final activityName = doc['ActivityName'] as String;
  activityCounts[activityName] = (activityCounts[activityName] ?? 0) + 1;
}

// Convert to ChartData objects
List<ChartData> chartData = [];
activityCounts.forEach((activity, count) {
  final formattedTime = '$count $activity records';
  chartData.add(ChartData(activity, count.toDouble(), formattedTime));
});

// Sort the chartData list by value in descending order
chartData.sort((a, b) => b.value.compareTo(a.value));

// Get only the first 5 elements
chartData = chartData.take(5).toList();

// Reverse the list so that the biggest count is first
chartData = chartData.reversed.toList();

return chartData;

}
return [];
}

Future<List> fetchTotalActivityTime() async {
final userUID = FirebaseAuth.instance.currentUser?.uid;
if (userUID != null) {
final now = DateTime.now();
final currentMonthYear = DateFormat('MM-yyyy').format(now);

final querySnapshot = await FirebaseFirestore.instance
    .collection('users')
    .doc(userUID)
    .collection(currentMonthYear)
    .where('ActivityName', isNotEqualTo: null)
    .where('ActivityName', isNotEqualTo: 'placeholder')
    .get();

if (querySnapshot.docs.isEmpty) {
  // Return example chart data if no records are found
  return generateExampleChartData();
}

// Aggregate total activity time for each activity
Map<String, double> activityTimes = {};
for (var doc in querySnapshot.docs) {
  final activityName = doc['ActivityName'] as String;
  final activityTimeRaw = doc['ActivityTime'] as String;

  double activityTime = parseActivityTime(activityTimeRaw);

  // Convert time from minutes to hours
  double activityTimeInHours = activityTime / 60.0;

  activityTimes[activityName] = (activityTimes[activityName] ?? 0) + activityTimeInHours;
}

// Convert to ChartData objects
List<ChartData> chartData = [];
activityTimes.forEach((activity, time) {
  final hours = time.floor();
  final minutes = ((time - hours) * 60).toInt();
  final formattedTime = '$hours hours $minutes minutes';
  chartData.add(ChartData(activity, time, formattedTime));
});

// Sort the chartData list by value in descending order
chartData.sort((a, b) => b.value.compareTo(a.value));

// Get only the first 5 elements
chartData = chartData.take(5).toList();

// Reverse the list so that the biggest time is first
chartData = chartData.reversed.toList();

return chartData;

}
return [];
}

List generateExampleChartData() {
// Example data
List exampleData = [
ChartData('Example 1', 3, '3 records'),
ChartData('Example 2', 5, '5 records'),
ChartData('Example 3', 10, '10 records'),
ChartData('Example 4', 15, '15 records'),
ChartData('Example 5', 20, '20 records'),
];

return exampleData;
}

double parseActivityTime(String activityTime) {
// Initialize total time in minutes
double totalMinutes = 0.0;

// Use regular expressions to extract the values
final hoursRegex = RegExp(r'(\d+)\s*hours?');
final minutesRegex = RegExp(r'(\d+)\s*mins?');

final hoursMatch = hoursRegex.firstMatch(activityTime);
final minutesMatch = minutesRegex.firstMatch(activityTime);

if (hoursMatch != null) {
  totalMinutes += double.parse(hoursMatch.group(1)!) * 60;
}
if (minutesMatch != null) {
  totalMinutes += double.parse(minutesMatch.group(1)!);
}

return totalMinutes;

}
}

class ChartData {
ChartData(this.category, this.value, this.formattedTime);
final String category;
final double value;
final String formattedTime;
}

Hi @Welnnys,

You can achieve your outcome by using the builder property in the DataLabelSettings. This will allow you to customize the appearance of the dataLabels. Also, you can display the datalabels in the reverse order using the chartData from the dataSource. We have shared code snippet, screenshot, user guide documentation link, and sample below for your reference. Please let us know if you require any additional assistance.

UG Link: https://help.syncfusion.com/flutter/circular-charts/datalabel#templating-the-labels

Code Snippet:

         RadialBarSeries<ChartSampleData, String>(
              dataLabelSettings: DataLabelSettings(
                isVisible: true,
                builder: (data, point, series, pointIndex, seriesIndex) {
                  int reverseIndex = chartData.length - 1 - pointIndex;
                  return Text(chartData[reverseIndex].text);
                },
              ),
              dataSource: chartData,
              dataLabelMapper: (ChartSampleData data, _) => data.text,
            )
          ),

Screenshot:

Regards,
Lokesh P.

github_1899_datalabels.zip

[Welnnys]

I want the smallest circle to be the highest records amount tho, so the circles go from 3 5 10 15 20 and 20 is the biggest and the labels to be from top to bottom so the first label is the highest records too

Hi @Welnnys,

Solution 1:

You can display the data labels by adding the dataLabelText property in the model class and assigning it to the dataLabelMapper in the RadialBarSeries or builder in the DataLabelSettings. We have shared a code snippet and screenshot for your reference below.

Code Snippet:

List<ChartSampleData> chartData = <ChartSampleData>[
  ChartSampleData(
    x: 'Example 1',
    y: 3,
    dataLabelText: '20 records',
    pointColor: const Color.fromRGBO(248, 177, 149, 1.0),
  ),
  ChartSampleData(
    x: 'Example 2',
    y: 5,
    dataLabelText: '15 records',
    pointColor: const Color.fromRGBO(246, 114, 128, 1.0),
  ),
  ChartSampleData(
    x: 'Example 3',
    y: 6,
    dataLabelText: '10 records',
    pointColor: const Color.fromRGBO(61, 205, 171, 1.0),
  ),
  ChartSampleData(
    x: 'Example 4',
    y: 7,
    dataLabelText: '5 records',
    pointColor: const Color.fromRGBO(1, 174, 190, 1.0),
  ),
  ChartSampleData(
    x: 'Example 5',
    y: 8,
    dataLabelText: '3 records',
    pointColor: const Color.fromRGBO(1, 174, 190, 1.0),
  ),
];

RadialBarSeries<ChartSampleData, String>(
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    builder: (
      dynamic data,
      ChartPoint<dynamic> point,
      ChartSeries<dynamic, dynamic> series,
      int pointIndex,
      int seriesIndex,
    ) {
      return Text(chartData[pointIndex].dataLabelText);
    },
  ),
  dataSource: chartData,
);

class ChartSampleData {
  ChartSampleData({
    required this.x,
    required this.y,
    required this.dataLabelText,
    required this.pointColor,
  });

  final String x;
  final double y;
  final String dataLabelText;
  final Color pointColor;
}

Screenshot:

Solution 2:

You can achieve your outcome by storing the dataLabels in the separate list. And, you can display the dataLabels based on the pointIndex using the builder property in the DataLabelSettings. We have shared code snippet and screenshot for your reference below.

Code Snippet:

final List<String> _dataLabelText = [
  '20 records',
  '15 records',
  '10 records',
  '5 records',
  '3 records',
];

RadialBarSeries<ChartSampleData, String>(
  dataLabelSettings: DataLabelSettings(
    isVisible: true,
    builder: (
      dynamic data,
      ChartPoint<dynamic> point,
      ChartSeries<dynamic, dynamic> series,
      int pointIndex,
      int seriesIndex,
    ) {
      return Text(_dataLabelText[pointIndex].toString());
    },
  ),
  dataSource: chartData,
);

Screenshot:

Regards,
Lokesh P.

[Welnnys]

This is not really what I meant, what I really wanted is what I have here:

Code:
class OverviewPage extends StatefulWidget {
const OverviewPage({super.key});

@OverRide
_OverviewPageState createState() => _OverviewPageState();
}

class _OverviewPageState extends State {
bool showTotalActivityTime =
true; // set to false to first show the total counts

@OverRide
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
surfaceTintColor: Colors.white,
title: const Text(
'Overview',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
automaticallyImplyLeading: false, // Removes the go back arrow
backgroundColor: Colors.white,
actions: const [
ProfilePicture(),
],
),
body: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(
16.0), // Add some padding around the button
child: ElevatedButton(
onPressed: () {
setState(() {
showTotalActivityTime = !showTotalActivityTime;
});
},
style: ElevatedButton.styleFrom(
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(
vertical: 15.0, horizontal: 30.0),
backgroundColor: Colors.redAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
elevation: 5,
shadowColor: Colors.black, // Text color
),
child: Text(
showTotalActivityTime
? 'Show Activity Counts'
: 'Show Total Activity Time',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
Expanded(
child: Column(
children: [
FutureBuilder<List>(
future: showTotalActivityTime
? fetchTotalActivityTime()
: fetchActivityCounts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
final chartData = snapshot.data ?? [];
return Column(
children: [
SizedBox(
height: 275, // Adjust height as needed
width: double.infinity, // Take full width
child: Stack(
children: [
SfCircularChart(
legend: Legend(
isVisible: true,
position: LegendPosition.right,
legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
final reversedIndex = snapshot.data!.length - 1 - index;
final legendText = snapshot.data![reversedIndex].category;
return Text(legendText); // Wrap legend text in Text widget
},
),
series: [
RadialBarSeries<ChartData, String>(
dataSource: snapshot.data!,
xValueMapper: (ChartData data, _) => data.category,
yValueMapper: (ChartData data, _) => data.value,
dataLabelMapper: (ChartData data, _) => data.formattedTime,
dataLabelSettings: const DataLabelSettings(isVisible: true),
trackBorderWidth: 2,
gap: '17%',
innerRadius: '10%',
)
],
),
],
),
),
buildActivityList(chartData),
],
);
}
},
),
],
),
),
],
),
),
);
}

Future<List> fetchActivityCounts() async {
final userUID = FirebaseAuth.instance.currentUser?.uid;
if (userUID != null) {
final now = DateTime.now();
final currentMonthYear = DateFormat('MM-yyyy').format(now);

  final querySnapshot = await FirebaseFirestore.instance
      .collection('users')
      .doc(userUID)
      .collection(currentMonthYear)
      .where('ActivityName', isNotEqualTo: null)
      .where('ActivityName', isNotEqualTo: 'placeholder')
      .get();

  if (querySnapshot.docs.isEmpty) {
    // Return example chart data if no records are found
    return generateExampleChartData();
  }

  // Aggregate count of records for each activity
  Map<String, int> activityCounts = {};
  for (var doc in querySnapshot.docs) {
    final activityName = doc['ActivityName'] as String;
    activityCounts[activityName] = (activityCounts[activityName] ?? 0) + 1;
  }

  // Convert to ChartData objects
  List<ChartData> chartData = [];
  activityCounts.forEach((activity, count) {
    final formattedTime = '$count $activity records';
    chartData.add(ChartData(activity, count.toDouble(), formattedTime));
  });

  // Sort the chartData list by value in descending order
  chartData.sort((a, b) => b.value.compareTo(a.value));

  // Get only the first 5 elements
  chartData = chartData.take(5).toList();

  // Reverse the list so that the biggest count is first
  chartData = chartData.reversed.toList();

  return chartData;
}
return [];

}

Future<List> fetchTotalActivityTime() async {
final userUID = FirebaseAuth.instance.currentUser?.uid;
if (userUID != null) {
final now = DateTime.now();
final currentMonthYear = DateFormat('MM-yyyy').format(now);

  final querySnapshot = await FirebaseFirestore.instance
      .collection('users')
      .doc(userUID)
      .collection(currentMonthYear)
      .where('ActivityName', isNotEqualTo: null)
      .where('ActivityName', isNotEqualTo: 'placeholder')
      .get();

  if (querySnapshot.docs.isEmpty) {
    // Return example chart data if no records are found
    return generateExampleChartData();
  }

  // Aggregate total activity time for each activity
  Map<String, double> activityTimes = {};
  for (var doc in querySnapshot.docs) {
    final activityName = doc['ActivityName'] as String;
    final activityTimeRaw = doc['ActivityTime'] as String;

    double activityTime = parseActivityTime(activityTimeRaw);

    // Convert time from minutes to hours
    double activityTimeInHours = activityTime / 60.0;

    activityTimes[activityName] =
        (activityTimes[activityName] ?? 0) + activityTimeInHours;
  }

  // Convert to ChartData objects
  List<ChartData> chartData = [];
  activityTimes.forEach((activity, time) {
    final hours = time.floor();
    final minutes = ((time - hours) * 60).toInt();
    final formattedTime = '$hours hours $minutes minutes';
    chartData.add(ChartData(activity, time, formattedTime));
  });

  // Sort the chartData list by value in descending order
  chartData.sort((a, b) => b.value.compareTo(a.value));

  // Get only the first 5 elements
  chartData = chartData.take(5).toList();

  // Reverse the list so that the biggest time is first
  chartData = chartData.reversed.toList();

  return chartData;
}
return [];

}

List generateExampleChartData() {
// Example data
List exampleData = [
ChartData('Example 1', 3, 'No Data'),
ChartData('Example 2', 5, 'No Data'),
ChartData('Example 3', 10, 'No Data'),
ChartData('Example 4', 15, 'No Data'),
ChartData('Example 5', 20, 'No Data'),
];

return exampleData;

}

double parseActivityTime(String activityTime) {
// Initialize total time in minutes
double totalMinutes = 0.0;

// Use regular expressions to extract the values
final hoursRegex = RegExp(r'(\d+)\s*hours?');
final minutesRegex = RegExp(r'(\d+)\s*mins?');

final hoursMatch = hoursRegex.firstMatch(activityTime);
final minutesMatch = minutesRegex.firstMatch(activityTime);

if (hoursMatch != null) {
  totalMinutes += double.parse(hoursMatch.group(1)!) * 60;
}
if (minutesMatch != null) {
  totalMinutes += double.parse(minutesMatch.group(1)!);
}

return totalMinutes;

}

Future<List<Map<String, dynamic>>> fetchHighestActivityTime(
String userUID, String activity) async {
try {
final querySnapshot = await FirebaseFirestore.instance
.collection('users')
.doc(userUID)
.collection(activity)
.get();

  List<Map<String, dynamic>> activityTimes = [];

  for (var doc in querySnapshot.docs) {
    final data = doc.data();
    final activityTime = data['ActivityTime'] as String;
    final parsedActivityTime = parseActivityTime(activityTime);
    final date = parseDate(data['Date'] as String); // Parse the date here

    activityTimes.add({
      'ActivityName': data['ActivityName'] ?? 'N/A',
      'ActivityTime': parsedActivityTime,
      'RawActivityTime':
          activityTime, // Store the raw activity time as well
      'Distance': data['Distance'] ?? 'N/A',
      'Pace': data['Pace'] ?? 'N/A',
      'Time': data['Time'] ?? 'N/A',
      'Place': data['Place'] ?? 'N/A',
      'Date': date, // Use the parsed date
      'docId': doc.id,
    });
  }

  // Sort by activity time in descending order
  activityTimes
      .sort((a, b) => b['ActivityTime'].compareTo(a['ActivityTime']));

  return activityTimes;
} catch (e) {
  print('Error fetching highest activity time: $e');
  return [];
}

}

DateTime parseDate(String dateStr) {
final parsedDate = DateFormat('MMM dd yyyy').parse(dateStr);
return parsedDate;
}

Widget buildActivityList(List chartData) {
final userUID = FirebaseAuth.instance.currentUser?.uid;
final screenHeight = MediaQuery.of(context).size.height;

if (userUID != null && showTotalActivityTime) {
  double listViewHeight = screenHeight > 270 ? 270 : screenHeight;

  return Padding(
    padding:
        const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 8.0, right: 8.0),
    child: SizedBox(
      height: listViewHeight,
      child: ListView.builder(
        itemCount: chartData.length,
        itemBuilder: (context, index) {
          return FutureBuilder<List<Map<String, dynamic>>>(
            future: fetchHighestActivityTime(
                userUID, chartData[index].category),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: Text(''));
              } else if (snapshot.hasError) {
                return const Center(child: Text('Error loading data'));
              } else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
                final highestActivityTime = snapshot.data!.first;
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: [
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10.0),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.1),
                              blurRadius: 10.0,
                              spreadRadius: 2.0,
                            ),
                          ],
                        ),
                        padding: const EdgeInsets.all(16.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  '${highestActivityTime['ActivityName']}',
                                  style: const TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.bold),
                                ),
                                const SizedBox(width: 5),
                                const Text(
                                  '(monthly personal best)',
                                  style: TextStyle(
                                      fontSize: 16.0,
                                      fontWeight: FontWeight.normal,
                                      color: Colors.grey),
                                ),
                              ],
                            ),
                            const SizedBox(height: 8.0),
                            Text(
                              '${DateFormat('EEEE, MMM d').format(highestActivityTime['Date'] as DateTime)} - ${highestActivityTime['Time']} - ${highestActivityTime['Place']}',
                              style: const TextStyle(fontSize: 14.0),
                            ),
                            const SizedBox(height: 8.0),
                            Padding(
                              padding: EdgeInsets.zero,
                              child: Row(
                                children: [
                                  ActivityTile(
                                      title: 'Pace',
                                      value:
                                          '${highestActivityTime['Pace']}',
                                      withLine: false),
                                  const Spacer(),
                                  ActivityTile(
                                    title: 'Activity Time',
                                    value:
                                        '${highestActivityTime['RawActivityTime']}',
                                  ),
                                  const Spacer(),
                                  Padding(
                                    padding:
                                        const EdgeInsets.only(right: 24.0),
                                    child: ActivityTile(
                                        title: 'Distance',
                                        value:
                                            '${highestActivityTime['Distance']}'),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Positioned(
                        top: 0,
                        right: 0,
                        child: PopupMenuButton(
                          itemBuilder: (context) => [
                            const PopupMenuItem(
                              value: 'delete',
                              child: Row(
                                children: [
                                  Icon(Icons.delete, color: Colors.red),
                                  SizedBox(width: 8),
                                  Text('Delete',
                                      style: TextStyle(color: Colors.red)),
                                ],
                              ),
                            ),
                          ],
                          color: Colors.white,
                          onSelected: (value) async {
                            if (value == 'delete') {
                              final monthYear = DateFormat('MM-yyyy')
                                  .format(highestActivityTime['Date']);
                              final docId = highestActivityTime['docId'];

                              await FirebaseFirestore.instance
                                  .collection('users')
                                  .doc(userUID)
                                  .collection(monthYear)
                                  .doc(docId)
                                  .delete();

                              final activityName =
                                  highestActivityTime['ActivityName'];
                              await FirebaseFirestore.instance
                                  .collection('users')
                                  .doc(userUID)
                                  .collection(activityName)
                                  .doc(docId)
                                  .delete();

                              // Call setState to refresh the list/chart
                              setState(() {});

                              // Implement setState or any state management to update the UI if needed
                              showTopSnackBar(
                                Overlay.of(context),
                                const CustomSnackBar.success(
                                  message: "Deleted successfully!",
                                ),
                              );
                            }
                          },
                        ),
                      ),
                    ],
                  ),
                );
              } else {
                return const SizedBox(); // Return an empty container if there's no data
              }
            },
          );
        },
      ),
    ),
  );
} else {
  return const SizedBox(); // Return an empty container if userUID is null or showing total activity counts
}

}
}

class ChartData {
ChartData(this.category, this.value, this.formattedTime);
final String category;
final double value;
final String formattedTime;
}

Image:

Problem:

The problem I have been having right now is that I can't seem to be able to put the icons on the left side of each legend. I would be really thankful if you can help me with that. I will link an image below to show which icons I am talking about. ( the image is from my previous code before the changes I made to reverse the order of the legends )

Hi @Welnnys,

You can achieve your outcome by using the legendItemBuilder in the Legend. By using this, you can display the Legend icon by adding the RadialBarChart and we have displayed the legend text with the Row widget. We have shared user guide documentation link, online sample link, screenshot, code snippet and sample for your reference below.

UG Link: https://help.syncfusion.com/flutter/circular-charts/legend#legend-item-template

SB Link: https://flutter.syncfusion.com/#/circular-charts/chart-types/radial-bar/customized-radial-bar-chart

Code Snippet:

SfCircularChart(
  title: const ChartTitle(text: 'Shot put distance'),
  series: _getRadialBarDefaultSeries(),
  legend: Legend(
    isVisible: true,
    legendItemBuilder: (String name, dynamic series, dynamic point, int index) {
      final reversedIndex = chartData.length - 1 - index;
      final legendText = chartData[reversedIndex].x;

      return Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            height: 40,
            width: 50,
            child: SfCircularChart(
              margin: const EdgeInsets.all(0),
              series: [
                RadialBarSeries<ChartSampleData, String>(
                  xValueMapper: (ChartSampleData data, _) => data.x,
                  yValueMapper: (ChartSampleData data, _) => data.y,
                  pointColorMapper: (ChartSampleData data, _) => data.pointColor,
                  radius: '50%',
                  maximumValue: 30,
                  innerRadius: '70%',
                  cornerStyle: CornerStyle.bothCurve,
                  animationDuration: 0,
                  dataSource: [chartData[index]],
                )
              ],
            ),
          ),
          SizedBox(
            width: 80,
            child: Text(legendText),
          ),
        ],
      );
    },
  ),
),

Screenshot:

Regards,
Lokesh P.

github_1899_legend.zip