How to override series level markerSettings from SfCartesianChart()? - flutter

Question

I have a use case where I have multiple Spline charts in the same picture (see image). As you can see in the image, I need to show a flag marker only in the center curve, but not on the adjacent graphs. I have implemented similar behavior in the image, but I'm not able to remove the marker from the 1st & 3rd graph.
#override
Widget build(BuildContext context) {
final chartData = <_ChartData>[...];
final chartData2 = <_ChartData2>[...];
final chartData3 = <_ChartData3>[...];
return SfCartesianChart(
/// ... Some other props
trackballBehavior: _getTrackBallBehavior(),
series: <ChartSeries>[
SplineAreaSeries<_ChartData2, int>(
dataSource: chartData2,
xValueMapper: (_ChartData2 data, _) => data.x,
yValueMapper: (_ChartData2 data, _) => data.y,
/// INDIVIDUAL LEVEL MARKER SETTING --- not overriding the global one below
markerSettings: const TrackballMarkerSettings(
markerVisibility: TrackballVisibilityMode.hidden,
shape: DataMarkerType.none,
),
),
SplineSeries<_ChartData, int>(
dataSource: chartData,
xValueMapper: (_ChartData data, _) => data.x,
yValueMapper: (_ChartData data, _) => data.y,
),
SplineAreaSeries<_ChartData3, int>(
dataSource: chartData3,
xValueMapper: (_ChartData3 data, _) => data.x,
yValueMapper: (_ChartData3 data, _) => data.y,
),
],
);
}
TrackballBehavior _getTrackBallBehavior() {
return TrackballBehavior(
enable: true,
/// .... some other props
tooltipSettings: const InteractiveTooltip(
enable: true,
arrowLength: 0,
arrowWidth: 0,
),
/// GLOBAL MARKER SETTING
markerSettings: const TrackballMarkerSettings(
markerVisibility: TrackballVisibilityMode.visible,
shape: DataMarkerType.image,
width: 10,
height: 10,
image: CachedNetworkImageProvider(Images.targetFlagWhite),
),
builder: (ctx, details) {
if (details.seriesIndex == 0 || details.seriesIndex == 2)
return Text('Rs.1304', style: AppText.text14w600Title);
return Container(
width: 83.w,
height: 28.h,
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 2.h),
decoration: BoxDecoration(
/// Some decore props
),
child: Text('Rs..1344', style: AppText.text14w600Title),
);
},
);
}
How can achieve that? Or is there a workaround for it?

Answer 1

I suggest you use the onTrackballPositionChanging callback to hide the trackball marker for the specific series 1st and 3rd. In this callback you can get or set the x and y position for each marker, here we have set the marker x and y position value as double.infinity when the series index is 0 and 2 otherwise it is in actual value. We have attached the code snippet below for your reference.
Screenshot:
Code snippet:
onTrackballPositionChanging: (args) {
if (args.chartPointInfo.seriesIndex != 1) {
args.chartPointInfo.markerXPos = double.infinity;
args.chartPointInfo.markerYPos = double.infinity;
}
}