The date X axis not corrected

[randhika]

Hi folks, I've got a small issue here, so the graph not showing properly. Lemme explain the data first. I used the Line chart data with DateTime.

"data": [{ "dimensions": { "timestamp": "2023-06-26T00:00:00.000Z" }, "event": { "count": 1, "ontime_percentage": 0, "order_delayed": 1, "order_ontime": 0 } }, { "dimensions": { "timestamp": "2023-07-05T00:00:00.000Z" }, "event": { "count": 5, "ontime_percentage": 0.4, "order_delayed": 3, "order_ontime": 2 } }, { "dimensions": { "timestamp": "2023-07-07T00:00:00.000Z" }, "event": { "count": 21, "ontime_percentage": 0, "order_delayed": 21, "order_ontime": 0 } } }],

But this's the chart data that the app has parsed [(26.0, 0.0), (5.0, 0.4), (7.0, 1.0)] the minX in the chart starts from 1, maxX start from 30. Hence, (26.0, 0.0) is put in the end by the library, that's why we have this weird graph.

This's our code

Widget bottomTitleWidgets(double value, TitleMeta meta) { return SideTitleWidget( axisSide: meta.axisSide, space: 4, child: Text('${value.toInt()}',), ); }

LineChart(LineChartData( gridData: FlGridData(show: false), borderData: FlBorderData(show: false), titlesData: FlTitlesData( show: true, rightTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), topTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), leftTitles: AxisTitles( sideTitles: SideTitles(showTitles: false), ), bottomTitles: AxisTitles( sideTitles: SideTitles(showTitles: true, reservedSize: 24, getTitlesWidget: bottomTitleWidgets), ), ), lineBarsData: [ LineChartBarData( spots: sourceList, isCurved: true, gradient: const LinearGradient( colors: [MexColors.brandGrabGreen, MexColors.brandTropicalGreen], ), barWidth: 2, isStrokeCapRound: true, dotData: FlDotData( show: true, ), belowBarData: BarAreaData( show: true, gradient: LinearGradient( begin: FractionalOffset.bottomCenter, end: FractionalOffset.topCenter, colors: [MexColors.brandDugongGreen, MexColors.brandGrabGreen].map((color) => color.withOpacity(0.2)).toList(), ), ), ) ], minX: 1, maxX: 30));

Lib version fl_chart: ^0.55.2. Thanks

[imaNNeo]

The issue is that your X values are not sorted. At the moment, fl_chart does not have any sorting algorithm on your data. You should do the sorting.

[heshaShawky]

The issue is that your X values are not sorted. At the moment, fl_chart does not have any sorting algorithm on your data. You should do the sorting.

this is a bug, the x values on the graph get ASC sorted,

so for example I have the following set of data:

final data = [
  FlSpot(1, 1),
  FlSpot(3, 2),
  FlSpot(2, 4),
];

this will end up like above because you sort the x line as ( 1, 2, 3 ) not as the array order ( 1, 3, 2 ) and there's no way I can prevent that from happening

[imaNNeo]

Can you please provide me a reproducible code? (a main.dart file)