Why me trackball always disappears when I move a mouse on a SfCartesianChart?

Question

I have SfCartesianChart and trackball inside, when I try to click or move a mouse on the SfCartesianChart then nothing happens, my trackball doesn't appear.

It appears only one second then immediately disappears, I fond out it by clicking and moving a mouse on SfCartesianChart almost a minute...

How to fix that?

This is my SfCartesianChart, there is no trackball when I click or move on blue dots:

And this is my code:

class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  late TabController _tabController;
  void initState() {
      _tabController = TabController(vsync: this, length: 3);
      super.initState();
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 220.h,
      child: TabBarView(
        controller: _tabController,
        children: [
          DaysChart(
            monitoringData: state.chartData,
            precision: 1
          ),
          DaysChart(
            monitoringData: state.chartData,
            precision: 2
          ),
           DaysChart(
            monitoringData: state.chartData,
            precision: 3
          ),
        ],
      )
    );
  }
}

Chartdata looks like this:

state.chartData = List<TimeSeriesValues> dayMonitoringData = [
    TimeSeriesValues(DateTime(2007, 2, 1, 8, 40), 30),
    TimeSeriesValues(DateTime(2007, 2, 1, 12, 40), 80),
    TimeSeriesValues(DateTime(2007, 2, 1, 18, 40), 50),
  ];

And TimeSeriesValues class:

class TimeSeriesValues {
  final DateTime time;
  final int values;

  TimeSeriesValues(this.time, this.values);
}

And this is DaysChart:

class DaysChart extends StatefulWidget {
  const DaysChart({
    Key? key,
    required this.monitoringData,
    required this.precision,
  }) : super(key: key);
  final List<TimeSeriesValues> monitoringData;
  final int precision;

  @override
  State<DaysChart> createState() => _DaysChartState();
}

class _DaysChartState extends State<DaysChart> {

  late TrackballBehavior _trackballBehavior;
  @override
  void initState() {
    _trackballBehavior = TrackballBehavior(
      enable: true,
      shouldAlwaysShow: true,
      lineColor: const Color(0xFF454545),
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.nearestPoint,
      tooltipSettings: const InteractiveTooltip(
        arrowLength: 0,
        arrowWidth: 0,
        canShowMarker: false,
        color: Colors.transparent,
      ),
      builder: (context, TrackballDetails trackballDetails) {
        var tag = Localizations.maybeLocaleOf(context)?.toLanguageTag();
        return SizedBox(
          height: 50,
          child: Column(
            children: [
              Text(
                "${trackballDetails.point!.yValue.round().toString()}%",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                )
              ),
              Text(
                DateFormat.MMMMd(tag).format(trackballDetails.point!.x),
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 10.sp,
                ),
              )
            ],
          )
        );
      }
    );

    super.initState();
  }
@override
  Widget build(BuildContext context) {
    final List<double> stops = <double>[];
    stops.add(0.1);
    stops.add(1.0);
  
  return SizedBox(
    height: 190.h,
    width: 320.w,
    child: SfCartesianChart(
      plotAreaBorderWidth: 0,
      plotAreaBorderColor: Colors.white24,
      trackballBehavior: _trackballBehavior,
      primaryXAxis: DateTimeCategoryAxis(
        majorTickLines: const MajorTickLines(width: 0), 
        axisLine: const AxisLine(
          color: Colors.white24,
          dashArray: <double>[5,5]
        ),
        minimum: widget.monitoringData.first.time,
        maximum: widget.monitoringData.last.time,
        intervalType: widget.precision == 1
          ? DateTimeIntervalType.minutes
          : widget.precision == 2
            ? DateTimeIntervalType.days
            : DateTimeIntervalType.months,
           dateFormat: widget.precision == 1
            ? DateFormat.Hm()
              : widget.precision == 2
              ? DateFormat.E()
              : DateFormat.MMMd(),
             borderColor: Colors.transparent,
             majorGridLines: const MajorGridLines(
             width: 0.5,
              color: Colors.transparent,
          ),
      ),
      primaryYAxis: NumericAxis(
        majorGridLines: const MajorGridLines(width: 0.5, color: Colors.white24, dashArray: <double>[5, 5]),
        majorTickLines: const MajorTickLines(width: 0),
        axisLine: const AxisLine(
          width: 0
        ),
        labelStyle: const TextStyle(
          fontSize: 0
        ),
        minimum: 0,
        maximum: 100
      ),
      series: <ChartSeries<TimeSeriesValues, DateTime>>[
      AreaSeries<TimeSeriesValues, DateTime>(
        borderWidth: 2,
        animationDuration: 0,
        borderColor: const Color(0xFF409CFF),
        dataSource: widget.monitoringData,
        markerSettings: const MarkerSettings(
          isVisible: true,
          color: Color(0xFF409CFF),
          height: 11,
          width: 11,
          borderWidth: 3,
          borderColor: Colors.transparent,
        ),
        xValueMapper: (TimeSeriesValues sales, _) => sales.time,
        yValueMapper: (TimeSeriesValues sales, _) => sales.values,
        gradient: LinearGradient(
          colors: const [Color(0xFF121212), Color(0xFF10273F)],
          stops: stops,
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter),
        )
      ]
  );
}