Flutter Syncfusion Chart Sorting Issue: Data Not Displaying in Correct Order - Stack Overflow

I'm using Syncfusion 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)pareTo(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.

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: 'المبيعات',
    ),
  ],
);

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?