How to use DateTime as X values with Flutter FLChart -

Question

I am trying to build a linear chart with flutter and FlChart.

When I start the application, it is very slow and also seems to plot data uncorrectly.

What I understand of plot data with FLChart linear chart:

• I understood that you can use minX and maxX to set the start and the end of chart
• I understood that you can use horizontalInterval to set the interval of the chart

Now I have this data in my Event class:

Event{ DateTime date; double amount; }

I have my graph class. First I sort my date from smaller to bigger (I take data from firebase)

Then I sum data, if it's entrata = means money go in I add to total, if is uscita = money out, I subtract from total. And I build my ChartData

I put minX and maxX to the smaller and bigger date minus something (to try if it worked). Then I put horizontal interval at 3600000 who is an hour (so I have 24 hour per day).

Then in bottomTitleWidgets I format my values to DateFormat to represent in X axis.

The problem 1 - What I miss is that I couldn't grasp how side and bottomWidget works i think. Since when program start, it is very slow and after it show me the plot, the plot is empty.

Whit syncfusion I didn't have this problem coz it manages date and time differently.

2- there is a way to show X axis in the middle of the graph?

class MyGraph10 extends StatelessWidget {
  MyGraph10({Key? key}) : super(key: key);
  double max=0;
  List<FlSpot>   chartData = <FlSpot>[];
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: DatabaseStream().getEventAsStream(),
        builder: ( context, snapshot) {
          if (snapshot.hasData) {
            final myEvent = snapshot.data as List<Event>;
            var entrate = 0.0;
            myEvent.sort((b, a) {
              var adate = a.date
                  .millisecondsSinceEpoch; //before -> var adate = a.expiry;
              var bdate = b.date
                  .millisecondsSinceEpoch; //var bdate = b.expiry;
              return -adate.compareTo(bdate);
            });
            for (var e in myEvent) {
              if (e.type == "Entrata") {
                totale = totale + e.amount;
              }
              if (e.type == "Uscita") {
                totale= totale- e.amount;
              }

                chartData.add(FlSpot(e.date.millisecondsSinceEpoch.toDouble(),totale));
            }
          }
          return LineChart(
            LineChartData(
              gridData: FlGridData(
                show: true,
                drawVerticalLine: true,
                horizontalInterval:  3600000,
                verticalInterval: 100,
                getDrawingHorizontalLine: (value) {
                  return FlLine(
                    color: Colors.grey,
                    strokeWidth: 1,
                  );
                },
                getDrawingVerticalLine: (value) {
                  return FlLine(
                    color: Colors.grey,
                    strokeWidth: 1,
                  );
                },
              ),
              titlesData: FlTitlesData(
                show: true,
                rightTitles: AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
                topTitles: AxisTitles(
                  sideTitles: SideTitles(showTitles: false),
                ),
                bottomTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    reservedSize: 30,
                    interval: 1,
                    getTitlesWidget: bottomTitleWidgets,
                  ),
                ),
                leftTitles: AxisTitles(
                  sideTitles: SideTitles(
                    showTitles: true,
                    interval: 1,
                    getTitlesWidget: leftTitleWidgets,
                    reservedSize: 42,
                  ),
                ),
              ),
              borderData: FlBorderData(
                show: true,
                border: Border.all(color: const Color(0xff37434d)),
              ),
              minX: 1682000000000,
              maxX: 1682400000000,
              minY: 0,
              maxY: 1000,
              lineBarsData: [
                LineChartBarData(
                  spots: chartData,
                  isCurved: true,
                  gradient: LinearGradient(
                    colors: [
                      Colors.green.shade800,
                      Colors.green.shade900,
                    ],
                  ),
                  barWidth: 5,
                  isStrokeCapRound: true,
                  dotData: FlDotData(
                    show: false,
                  ),
                  belowBarData: BarAreaData(
                    show: true,
                    gradient: LinearGradient(
                      colors: [
                        Colors.green,
                        Colors.greenAccent,
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        }
        );
  }

  Widget leftTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 15,
    );
    print(value.toString());
    String text;
    switch (value.toInt()) {
      case 1:
        text = '10K';
        break;
      case 3:
        text = '30k';
        break;
      case 5:
        text = '50k';
        break;
      default:
        return Container();
    }

    return Text(text, style: style, textAlign: TextAlign.left);
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
    );
    Widget text;
   String dateFormatted = DateFormat('dd/MM').format(DateTime.fromMillisecondsSinceEpoch(value.toInt()));
   text=Text(dateFormatted);

    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}