Data Not Displaying in Correct Order

[moha-b]

Bug description

I'm using SfCartesianChart in my Flutter app to display monthly sales and cost data. The data is correctly sorted based on the month order before being passed to the chart, but the chart does not display the data correctly.

Even though debugging logs confirm that the data is sorted correctly before rendering, the chart does not reflect the correct order in the X-axis.

What I Have Tried:

✅ Sorting Data Properly:

• I implemented a reusable sortByMonth function that sorts the months based on English order and then converts them back to Arabic months before displaying them.
• Debugging prints confirm that the data is correctly sorted before rendering.

// English month order mapping
final Map<String, int> monthOrder = {
  'January': 1,
  'February': 2,
  'March': 3,
...
};

// Arabic month conversion mapping
final Map<int, String> arabicMonths = {
  1: 'يناير',
  2: 'فبراير',
  3: 'مارس',
...
};

List<DataModel> sortByMonth(List<DataModel> data) {
  // Sort data based on English month order
  data.sort(
      (a, b) => (monthOrder[a.month] ?? 0).compareTo(monthOrder[b.month] ?? 0));

  // Convert back to Arabic months
  return data.map((e) {
    return DataModel(
      month: arabicMonths[monthOrder[e.month] ?? 0] ?? e.month,
      value: e.value,
      label: e.label,
      year: e.year,
    );
  }).toList();
}

✅ Ensuring Sorted Data is Used:

• I assigned the sorted data to the dataSource of SfCartesianChart.

✅ Disabling Internal Chart Sorting:

• I explicitly set sortingOrder: SortingOrder.none.

✅ Checked State Updates:

• The data is correctly set using setState() in a StatefulWidget.

✅ Debugging Output Confirms Correct Order:

print("Sorted Direct Costs Data: ${sortedDirectCostsData.map((e) => e.month).toList()}");
print("Sorted Sales Data: ${sortedSalesData.map((e) => e.month).toList()}");

Output confirms data is in the right order before being passed to the chart, yet the chart still displays incorrect order.

Expected Behavior:

The X-axis should display months in the correct order (Arabic months) after sorting.

Actual Behavior:

The X-axis displays months in random or incorrect order, despite sorting being correct before rendering.

Flutter & Syncfusion Versions:

Flutter: 3.24.5
syncfusion_flutter_charts: ^27.1.53
Dart: 3.5.4

Questions:

• Why is the Syncfusion chart ignoring the sorted order of months?

• Is there an issue with CategoryAxis forcing its order?

• How can I ensure that Arabic month labels appear in the correct order?

Steps to reproduce

1. make a dummy list of this object

class DataModel {
  final String label;
  final double value;
  final String month;
  final int year;

  DataModel({
    required this.label,
    required this.value,
    required this.month,
    required this.year,
  });

2. fill it with random data
3. sort it based on months u can use the function in the description sortByMonth function
4. pass the data to the charts in the Code sample section

Code sample

Chart 1

SfCartesianChart(
  primaryXAxis: CategoryAxis(),
  series: <CartesianSeries>[
    ColumnSeries<DataModel, String>(
      sortingOrder: SortingOrder.none, // Disabled internal sorting
      dataSource: sortedDirectCostsData, // Already sorted before passing
      xValueMapper: (data, _) => data.month, // Arabic month
      yValueMapper: (data, _) => data.value,
      name: 'التكاليف المباشرة',
    ),
    ColumnSeries<DataModel, String>(
      sortingOrder: SortingOrder.none,
      dataSource: sortedSalesData,
      xValueMapper: (data, _) => data.month,
      yValueMapper: (data, _) => data.value,
      name: 'المبيعات',
    ),
  ],
);

Chart 2

SfCartesianChart(
                  primaryXAxis: CategoryAxis(
                    majorGridLines: MajorGridLines(width: 0),
                    labelStyle: TextStyle(color: Colors.grey, fontSize: 12),
                  ),
                  primaryYAxis: NumericAxis(
                    minimum: 0,
                    maximum: 18000,
                    interval: 3000,
                    labelFormat: '{value}',
                    axisLine: AxisLine(width: 0),
                    majorTickLines: MajorTickLines(size: 0),
                  ),
                  tooltipBehavior: TooltipBehavior(enable: true),
                  series: <LineSeries<DataModel, String>>[
                    LineSeries<DataModel, String>(
                      dataSource: sortedDailyExpenses,
                      xValueMapper: (DataModel expense, _) => expense.month,
                      yValueMapper: (DataModel expense, _) => expense.value,
                      enableTooltip: true,
                      selectionBehavior: SelectionBehavior(enable: true),
                      markerSettings: MarkerSettings(
                        isVisible: true,
                        shape: DataMarkerType.circle,
                        borderColor: Colors.blue,
                        borderWidth: 2,
                      ),
                      color: Colors.blue,
                      dataLabelSettings: DataLabelSettings(
                        isVisible: true,
                        textStyle: TextStyle(
                          color: Colors.blue,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ],
                )

Screenshots or Video

Chart 1

Chart 2

Stack Traces

Stack Traces

i will write the month number for more declaration

I/flutter ( 7403): After Sorting Daily Expenses: [يناير, أبريل, نوفمبر] => [11,4,1] 
I/flutter ( 7403): Sorted Direct Costs Data: [يناير, نوفمبر] => [4,1]
I/flutter ( 7403): Sorted Sales Data: [يناير, أبريل, نوفمبر] => [11,4,1]

month sorting is correct and the data assigned correctly

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.24.5, on Microsoft Windows [Version 10.0.26100.2894], locale en-US)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc3)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.12.4)
[√] Android Studio (version 2024.2)
[√] Android Studio (version 2023.3)
[√] IntelliJ IDEA Ultimate Edition (version 2024.2)
[√] Connected device (4 available)
[√] Network resources