DateTimeCategoryAxis bug

main.dart

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DateTimeCategoryAxis"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            bubbleAndAreaSeries(DateTimeAxis(), "DateTimeAxis"),
            bubbleAndAreaSeries(DateTimeCategoryAxis(), "DateTimeCategoryAxis"),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget bubbleAndAreaSeries(ChartAxis chartAxis, String title) {
    final data = [
      _DataPoint(10, DateTime(2023, 1, 2), 3),
      _DataPoint(5, DateTime(2023, 1, 3), 4.5),
      _DataPoint(7, DateTime(2023, 1, 4), 1),
      _DataPoint(4, DateTime(2023, 1, 5), 5),
      _DataPoint(4, DateTime(2023, 1, 10), 5),
    ];

    final areaData = [
      ...data,
      _DataPoint(5, DateTime(2023, 1, 6), 4.5),
      _DataPoint(5, DateTime(2023, 1, 7), 4.5),
      _DataPoint(5, DateTime(2023, 1, 8), 4.5),
      _DataPoint(5, DateTime(2023, 1, 10), 4.5),
    ]..sort((a, b) => a.x.compareTo(b.x));

    return SfCartesianChart(
        primaryYAxis: NumericAxis(),
        primaryXAxis: chartAxis,
        title: ChartTitle(text: title),
        legend: Legend(isVisible: true, position: LegendPosition.bottom),
        tooltipBehavior: TooltipBehavior(enable: true),
        series: <ChartSeries<_DataPoint, DateTime>>[
          BubbleSeries(
            name: "Bubbles",
            dataSource: data,
            xValueMapper: (t, d) => t.x,
            yValueMapper: (t, d) => t.y,
            color: Colors.red.withAlpha(120),
            sizeValueMapper: (t, d) => t.size,
            borderColor: Colors.black,
            borderWidth: 1,
            pointColorMapper: (t,d)=> Colors.red.withAlpha(t.size.toInt())
          ),
          LineSeries(
            name: "Line",
            dataSource: data,
            xValueMapper: (t, d) => t.x,
            yValueMapper: (t, d) => t.y,
          ),
          AreaSeries(
            name: "Area",
            dataSource: areaData,
            xValueMapper: (t, d) => t.x,
            yValueMapper: (t, d) => t.y / 2,
            borderWidth: 1,
            borderColor: Colors.green,
            gradient: const LinearGradient(
              colors: [Colors.green, Colors.transparent],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          ColumnSeries(
              name: "Column",
              dataSource: data,
              xValueMapper: (t, d) => t.x,
              yValueMapper: (t, d) => t.y,
              gradient: LinearGradient(
                colors: [Colors.brown.withAlpha(200), Colors.transparent],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ))
        ]);
  }
}

class _DataPoint {
  final int y;
  final DateTime x;
  final double size;

  _DataPoint(this.y, this.x, this.size);
}