Flutter time series chart weird X values

Question

I'm trying to make an app that displays some measurements from Firestore DB in a time series fashion. The document in the DB has an int value for the measurement and a timestamp value for date/time.

I tried flutter charts library to make a time series chart. It generally looks fine but i get weird numbers on the X axis.

Here's the code use for making the chart, including fetching from firestore. There's also a link to the image on how the chart looks.

class makeChart extends StatefulWidget {
  const makeChart({Key? key}) : super(key: key);

  @override
  State<makeChart> createState() => _makeChartState();
}

class _makeChartState extends State<makeChart> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<TimeSeriesData>>(
        future: makeChartData(),
        builder: (BuildContext context,
            AsyncSnapshot<List<TimeSeriesData>> chartdata) {
          if (chartdata.hasData) {
            if (chartdata.connectionState == ConnectionState.done) {
              List<charts.Series<TimeSeriesData, DateTime>> series = [
                charts.Series(
                  id: 'measurement',
                  data: chartdata.data!,
                  domainFn: (TimeSeriesData series, _) => series.time,
                  measureFn: (TimeSeriesData series, _) => series.data,
                )
              ];
              return charts.TimeSeriesChart(
                series,
                dateTimeFactory: const charts.LocalDateTimeFactory(),
              );
            }
          }
          return Text('HELLO');
        });
  }
}

Future<List<TimeSeriesData>> makeChartData() async {
  List<TimeSeriesData> chartdata = <TimeSeriesData>[];

  QuerySnapshot firedata = await FirebaseFirestore.instance
      .collection('Environment')
      .orderBy('Timestamp')
      .get();
  firedata.docs.forEach((document) {
    Map<String, dynamic> data = document.data() as Map<String, dynamic>;
    Timestamp time = data['Timestamp'] as Timestamp;
    DateTime datetime =
        DateTime.fromMillisecondsSinceEpoch(time.millisecondsSinceEpoch);
    int CO2 = data['CO2'];
    chartdata.add(TimeSeriesData(datetime, CO2));
  });
  return Future<List<TimeSeriesData>>.value(chartdata);
}

class TimeSeriesData {
  final DateTime time;
  final int data;
  TimeSeriesData(this.time, this.data);
}

How it looks (can't upload images yet)

Answer 1

With help from @Shakthi Hettiarachchi, I managed to control the X axis format. Something like this:

            domainAxis: charts.DateTimeAxisSpec(
              showAxisLine: true,
              tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
                hour: new charts.TimeFormatterSpec(
                  format: 'Hm',
                  transitionFormat: 'Hm',
                  noonFormat: 'Hm',
                ),
              ),

Answer 2

Use this instead of your chart widget.

          charts.TimeSeriesChart(
                series,
                animate: widget.animate,
                animationDuration: const Duration(seconds: 2),
                flipVerticalAxis: false,
                dateTimeFactory: const charts.LocalDateTimeFactory(),
                primaryMeasureAxis: charts.NumericAxisSpec(
                    tickProviderSpec:
                        const charts.BasicNumericTickProviderSpec(
                      desiredMinTickCount: 8,
                    ),
                    showAxisLine: true,
                    renderSpec: charts.GridlineRendererSpec(
                        labelStyle: charts.TextStyleSpec(
                            color: Colors.black,
                        lineStyle: charts.LineStyleSpec(
                          dashPattern: const [2, 2],
                          color: Colors.black,
                        ))),
                domainAxis: charts.DateTimeAxisSpec(
                    showAxisLine: true,
                    tickProviderSpec: const charts.DayTickProviderSpec(
                      increments: [1],
                    ),
                    renderSpec: charts.GridlineRendererSpec(
                        labelStyle: charts.TextStyleSpec(
                            color: Colors.black,
                        lineStyle: charts.LineStyleSpec(
                          dashPattern: const [2, 2],
                          color: Colors.black,
                        ))),
              )