Unable to get daily trends on LineChart

[Henry]

Hi,

I am having a hard time understanding why the chart displays like the image:

my data source has data points (sample) like this:

[ PageInsightsView(date: 2022-02-08, value: 405), PageInsightsView(date: 2022-02-06, value: 405), PageInsightsView(date: 2022-05-13, value: 408), PageInsightsView(date: 2022-05-26, value: 406), PageInsightsView(date: 2022-03-26, value: 409), PageInsightsView(date: 2022-01-07, value: 388), PageInsightsView(date: 2022-01-31, value: 400), PageInsightsView(date: 2022-02-09, value: 405), PageInsightsView(date: 2022-02-11, value: 406), PageInsightsView(date: 2022-04-16, value: 408), PageInsightsView(date: 2022-01-12, value: 389), PageInsightsView(date: 2022-05-19, value: 406), PageInsightsView(date: 2022-05-08, value: 408), PageInsightsView(date: 2022-04-18, value: 408), PageInsightsView(date: 2022-06-08, value: 408), PageInsightsView(date: 2022-03-16, value: 411), PageInsightsView(date: 2022-04-09, value: 408), PageInsightsView(date: 2022-03-29, value: 409), PageInsightsView(date: 2022-01-11, value: 389), PageInsightsView(date: 2022-01-06, value: 388), PageInsightsView(date: 2022-02-19, value: 409), PageInsightsView(date: 2022-04-25, value: 409), PageInsightsView(date: 2022-05-14, value: 408), PageInsightsView(date: 2022-03-15, value: 411), PageInsightsView(date: 2022-03-03, value: 410), PageInsightsView(date: 2022-05-05, value: 408), PageInsightsView(date: 2022-04-29, value: 409), PageInsightsView(date: 2022-03-04, value: 410), PageInsightsView(date: 2022-05-07, value: 408), PageInsightsView(date: 2022-01-04, value: 388), PageInsightsView(date: 2022-02-07, value: 405), PageInsightsView(date: 2022-05-30, value: 406), PageInsightsView(date: 2022-02-21, value: 409), PageInsightsView(date: 2022-02-03, value: 404), PageInsightsView(date: 2022-01-26, value: 399), PageInsightsView(date: 2022-03-19, value: 410), PageInsightsView(date: 2022-01-16, value: 392), PageInsightsView(date: 2022-03-27, value: 409), PageInsightsView(date: 2022-04-21, value: 408), PageInsightsView(date: 2022-01-21, value: 398), PageInsightsView(date: 2022-05-22, value: 406), PageInsightsView(date: 2022-04-08, value: 408), PageInsightsView(date: 2022-02-26, value: 410), PageInsightsView(date: 2022-03-10, value: 410), PageInsightsView(date: 2022-02-28, value: 410), PageInsightsView(date: 2022-02-02, value: 403), PageInsightsView(date: 2022-05-10, value: 408), PageInsightsView(date: 2022-04-05, value: 409), PageInsightsView(date: 2022-03-08, value: 410), PageInsightsView(date: 2022-05-27, value: 406), PageInsightsView(date: 2022-04-23, value: 409), PageInsightsView(date: 2022-02-22, value: 409), PageInsightsView(date: 2022-03-31, value: 410), PageInsightsView(date: 2022-01-10, value: 388), PageInsightsView(date: 2022-06-01, value: 409), PageInsightsView(date: 2022-05-21, value: 406), PageInsightsView(date: 2022-01-22, value: 398), PageInsightsView(date: 2022-04-26, value: 409), PageInsightsView(date: 2022-01-13, value: 390), PageInsightsView(date: 2022-02-13, value: 406), PageInsightsView(date: 2022-06-03, value: 409) ]

code:

child: SfCartesianChart(

legend: Legend(

isVisible: true,

position: LegendPosition.bottom,

// offset: const Offset(150, 0),

),

title: ChartTitle(text: 'Reach'),

tooltipBehavior: _tooltipBehavior,

primaryXAxis: DateTimeAxis(

dateFormat: DateFormat.MMM(),

intervalType: DateTimeIntervalType.months,

),

series: <ChartSeries>[

LineSeries<PageInsightsView, DateTime>(

dataSource: dataPoints(),

name: 'Reach',

xValueMapper: (PageInsightsView reach, _) => DateTime.parse(reach.date!),

yValueMapper: (PageInsightsView reach, _) => num.parse(reach.value!),

sortFieldValueMapper: (PageInsightsView reach, _) =>

DateTime.parse(reach.date!),

),

],

)

Is anybody able to help?

Thank you

[Yuvaraj Gajaraj]

Hi Henry,

Greetings from Syncfusion. We have checked the code snippet and found you didn’t mention the sortingOrder property in the series, this is the reason why the series look unsorted even after mapping the sort value. So, kindly set the sortingOrder as ascending or descending then the series gets ordered based on that. We have also attached the code snippet and UG documentation below for your reference.

Code snippet:

SfCartesianChart(

  series: <ChartSeries<_ChartData, num>>[

    LineSeries(

      sortingOrder: SortingOrder.ascending,

      dataSource: chartData!,

      xValueMapper: (_ChartData data, _) => data.x,

      yValueMapper: (_ChartData data, _) => data.y,

      sortFieldValueMapper: (_ChartData data, _) => data.x

    )

  ],

)

UG: https://help.syncfusion.com/flutter/cartesian-charts/series-customization#sorting

Regards,

Yuvaraj.

[Henry]

Sorting the data fixed the issue! 

Thanks

[Yuvaraj Gajaraj]

Hi Henry,

Thanks for the update. If you have any other queries, please get back to us. We are always happy to assist you.

Regards,

Yuvaraj.