Description
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.