[syncfusion_flutter_charts] Trackball behaviour issue

[DhavalRKansara]

Hello team,

While implementing syncfusion_flutter_charts I need to add trackball on the graph, where trackball will be visible only when user traverses through the graph points. Along with trackball, I need to show a shadow effect behind it and for the same, I have used the border radius and border color as shown in the below code.

I am using syncfusion_flutter_charts: 22.2.12. I tried with syncfusion_flutter_charts latest version 25.1.38, but with the same event trackBall is not coming.

Issue: I need to show a shadow effect around trackball, but there was some weird behaviour while traversing from one point index to another, as you can see in the below-attached video.

Code:

SfCartesianChart(
   plotAreaBorderWidth: 0,
   primaryXAxis: DateTimeAxis(
     isVisible: false,
     dateFormat: defaultDateFormat,
   ),
   primaryYAxis: NumericAxis(
     isVisible: false,
   ),
   onTrackballPositionChanging: (trackballArgs) {
     if (currentDataPointIndex !=
         trackballArgs.chartPointInfo.dataPointIndex) {
       currentDataPointIndex =
           trackballArgs.chartPointInfo.dataPointIndex;
       ctrl.updateChartInfo(
         currentIndex:
             trackballArgs.chartPointInfo.dataPointIndex,
         updateDateString: true,
       );
     }
   },
   trackballBehavior: TrackballBehavior(
     enable: true,
     activationMode: ActivationMode.singleTap,
     tooltipSettings: const InteractiveTooltip(
       enable: false,
     ),
     shouldAlwaysShow: true,
     lineType: TrackballLineType.none,
     markerSettings: TrackballMarkerSettings(
       color: Colors.blue,
       width: 10.rMin,
       height: 10.rMin,
       borderColor: Colors.blue.withOpacity(0.2),
       borderWidth: 40,
       shape: DataMarkerType.circle,
       markerVisibility: TrackballVisibilityMode.visible,
     ),
   ),
   series: <ChartSeries<ChartData, DateTime>>[
     FastLineSeries<ChartData, DateTime>(
       color: Colors.blue,
       dataSource: chartData,
       xValueMapper: (ChartData sales, _) => sales.date,
       yValueMapper: (ChartData sales, _) => sales.price,
       onPointTap: (point) {
         ctrl.updateChartInfo(
           currentIndex: point.pointIndex ?? 0,
           updateDateString: true,
         );
       },
     ),
   ],
 )

Video:
https://github.com/syncfusion/flutter-widgets/assets/44993081/e956d3f1-487b-49a5-9dea-4f3d359b4ef4

Note: If we do use any other shape apart from the circle for track ball it's working fine.

[ghost]

Hi @DhavalRKansara,

We have reproduced the issue you reported on our end and the issue is scheduled to be fixed in our upcoming weekly patch release on April 30, 2024. We will notify you here once the release has been rolled out, and we appreciate your patience in the meantime.

Regards,
Lokesh P.

[PreethikaSelvam]

Hi @DhavalRKansara,

As mentioned in our previous update, we tried to resolve this issue but found that it was recurring even in a basic sample where we attempted to draw a large stroke using a path.addOval, confirming that this is an issue with the framework. So, we have logged a bug report in the Flutter GitHub repository with all the necessary information. You can track the status of this Flutter framework issue from the below link.

Link: flutter/flutter#147297

If you have any further queries, please feel free to reach out to us.

Regards,
Preethika Selvam.