Sort axis
Hello,
Is there a way to sort axis from 2019 to 2022?
SfCartesianChart(
borderColor: Colors.lightGreen,
borderWidth: 1,
margin: const EdgeInsets.all(5),
enableAxisAnimation: true,
backgroundColor: Colors.white,
primaryXAxis: CategoryAxis(
labelIntersectAction:
AxisLabelIntersectAction.multipleRows),
primaryYAxis: NumericAxis(
labelFormat: '{value}%',
numberFormat: NumberFormat('0.0')),
legend: Legend(
isVisible: true,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.bottom,
),
series: <StackedColumn100Series<ChartData,
String>>[
...mChartData
.map((dt) => dt.country)
.toSet()
.map(
(country) => StackedColumn100Series<
ChartData, String>(
dataSource: mChartData
.where((data) => data.country == country)
.toList(),
xValueMapper:
(ChartData data, _) =>
data.period,
yValueMapper:
(ChartData data, _) =>
data.perc,
animationDuration: 900,
markerSettings: const MarkerSettings(
isVisible: false, height: 8, width: 8),
name: country,
dataLabelSettings: const DataLabelSettings(
//color: Color.fromARGB(255, 251, 244, 224),
labelAlignment:
ChartDataLabelAlignment.middle,
isVisible: true),
),
),
],
),
Sao
Hi Sao,
We have analyzed you query and to achieve your requirement, you can use the sortFieldValueMapper and sortingOrder feature in the SfCartesianChart. In SfCartesianChart, we can sort the values given through the sortFieldValueMapper in both ascending and descending order with the help of sortingOrder.
Kindly refer the below code snippet:
|
SfCartesianChart( primaryXAxis: CategoryAxis(), primaryYAxis: NumericAxis(), series: <CartesianSeries<ChartSampleData, String>>[ StackedColumn100Series( dataSource: [ ChartSampleData('2023', 20), ChartSampleData('2022', 40), ChartSampleData('2021', 20), ChartSampleData('2020', 60), ChartSampleData('2019', 80), ], legendItemText: 'Year', xValueMapper: (ChartSampleData sales, int index) => sales.x, yValueMapper: (ChartSampleData sales, int index) => sales.y, dataLabelSettings: const DataLabelSettings( labelAlignment: ChartDataLabelAlignment.middle, isVisible: true, ), markerSettings: const MarkerSettings( isVisible: true, height: 8, width: 8, ), sortFieldValueMapper: (ChartSampleData sales, int index) => sales.x, sortingOrder: SortingOrder.ascending, ), ], legend: const Legend( isVisible: true, overflowMode: LegendItemOverflowMode.wrap, position: LegendPosition.bottom, ), ), |
Snapshot:
Also shared the sample below for your reference.
Regards,
Hari Hara Sudhan. K
Attachment: 183354_25fd911.zip
