Cannot give different trackball colors to Two RangeColumnSeries

[Ashutosh-Rana]

Use case

I want to show different trackball colors for each systolic and diastolic points when hovered but it is not happening.
Please find attached the screenshot for your reference.

Proposal

return TrackballBehavior(
      enable: true,
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
      tooltipAlignment: ChartAlignment.near,
      shouldAlwaysShow: true,
      lineColor: AppColors.grey.shade600,
      markerSettings: TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.diamond,
        height: 10,
        width: 10,
        borderWidth: 1,
        color: AppColors.status.shade700, // I want to make this color dynamic
        borderColor: AppColors.status.shade50,
      ),
      builder: builder,
    );

[Baranibharathip]

Hi @Ashutosh-Rana,

We have reviewed your query and would like to inform you that you can achieve your requirement by using a custom trackballBehavior. By utilizing the onPaint method, you can draw a custom marker on the trackball line. We have provided a code snippet and demo for your reference.

@override
  Widget build(BuildContext context) {
    return SfCartesianChart(
        trackballBehavior: _TrackballBehavior(),
            ....
        

class _TrackballBehavior extends TrackballBehavior {
  @override
  bool get enable => true;

  @override
  ActivationMode get activationMode => ActivationMode.singleTap;

  @override
  TrackballDisplayMode get tooltipDisplayMode =>
      TrackballDisplayMode.groupAllPoints;

  @override
  TrackballMarkerSettings? get markerSettings => const TrackballMarkerSettings(
        markerVisibility: TrackballVisibilityMode.visible,
        shape: DataMarkerType.diamond,
        borderWidth: 1,
      );

  @override
  void onPaint(PaintingContext context, Offset offset,
      SfChartThemeData chartThemeData, ThemeData themeData) {
    if (chartPointInfo.isEmpty || parentBox == null) {
      return;
    }
    super.onPaint(context, offset, chartThemeData, themeData);
    final Paint fillPaint = Paint()..style = PaintingStyle.fill;
    const Size lineMarkerSize = Size(15, 15);
    final translatePos =
        Offset(-lineMarkerSize.width / 2, -lineMarkerSize.height / 2);
    if (chartPointInfo.isNotEmpty) {
      final int length = chartPointInfo.length;
      for (int i = 0; i < length; i++) {
        fillPaint.color = chartPointInfo[i].color!;
        // High position.
        Offset position =
            Offset(chartPointInfo[i].xPosition!, chartPointInfo[i].yPosition!);
        paint(
          canvas: context.canvas,
          rect: position.translate(translatePos.dx, translatePos.dy) &
              lineMarkerSize,
          shapeType: ShapeMarkerType.diamond,
          paint: fillPaint,
        );
        // Low position.
        position = Offset(
            chartPointInfo[i].xPosition!, chartPointInfo[i].lowYPosition!);
        paint(
          canvas: context.canvas,
          rect: position.translate(translatePos.dx, translatePos.dy) &
              lineMarkerSize,
          shapeType: ShapeMarkerType.diamond,
          paint: fillPaint,
        );
      }
    }
  }
}

Demo :

Sample : GH_2287.zip

Regards,
Baranibharathi P.

[LavanyaGowtham2021]

Please reopen this ticket, if you need further assistance with this.