fluttersyncfusion

How to override series level markerSettings from SfCartesianChart()?


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? enter image description here


Solution

  • 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:

    enter image description here

    Code snippet:

    onTrackballPositionChanging: (args) {
      if (args.chartPointInfo.seriesIndex != 1) {
        args.chartPointInfo.markerXPos = double.infinity;
        args.chartPointInfo.markerYPos = double.infinity;
      }
    }