marker is not working with real-time chart

[md zeeshan iqbal]

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
// full source code

class StaticChart extends StatefulWidget {
  const StaticChart({Key? key}) : super(key: key);

  @override
  _chartState createState() => _chartState();
}

// ignore: camel_case_types
class _chartState extends State<StaticChart> {
  int? x = 10;
  int? y = 15;
  Timer? timer;
  int index = 0;
  @override
  void dispose() {
    timer!.cancel();
    super.dispose();
  }

  List<Widget> stackList = [];

  ChartSeriesController? _controller;
  late TrackballBehavior _trackballBehavior;
  late CrosshairBehavior _crosshairBehavior;
  @override
  void initState() {
    super.initState();
    _trackballBehavior = trackballBehavior();
    // _tooltipBehavior = tooltipBehavior();
    _crosshairBehavior = crosshairBehavior();
    timer = Timer.periodic(const Duration(seconds: 1), (_timer) {
      updateData().then((value) {
        _crosshairBehavior.show(
          chartCustomData[index].x,
          chartCustomData[index].y!.toDouble(),
        );
      });
      // if (_crosshairBehavior != null) {
      //   _crosshairBehavior.showByIndex(index);
      // }
    });
  }

  CrosshairBehavior crosshairBehavior() {
    return CrosshairBehavior(
      activationMode: ActivationMode.singleTap,
      enable: true,
      shouldAlwaysShow: true,
      lineType: CrosshairLineType.horizontal,
    );
  }

  TooltipBehavior tooltipBehavior() {
    return TooltipBehavior(
      canShowMarker: true,
      animationDuration: 20,
      activationMode: ActivationMode.singleTap,
      shouldAlwaysShow: true,
      elevation: 6,
      duration: 1,
      format: 'tool tip header',
      tooltipPosition: TooltipPosition.auto,
      color: Colors.indigoAccent,
      enable: true,
    );
  }

  TrackballBehavior trackballBehavior() {
    return TrackballBehavior(
      enable: true,
      lineColor: Colors.cyan,
      // shouldAlwaysShow: true,
      activationMode: ActivationMode.singleTap,
      lineType: TrackballLineType.horizontal,
      hideDelay: 10,
      shouldAlwaysShow: true,
      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
    );
  }

  List<Position> latLong = [];

  void onController(ChartSeriesController controller) {
    _controller = controller;
  }

  List<CartesianChartAnnotation> anotation = [];
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    return WillPopScope(
      onWillPop: () async {
        timer!.cancel();
        return true;
      },
      child: Scaffold(
        body: SafeArea(
          child: SizedBox(
              height: height,
              width: width,
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(
                      height: height / 1.2,
                      width: width,
                      child: buildStack(width, height),
                    ),
                    // buildRow(),
                  ],
                ),
              )),
        ),
      ),
    );
  }

  

  Stack buildStack(double width, double height) {
    return Stack(
      children: [
        Row(
          children: [
            Expanded(
              child: SfCartesianChart(
                onMarkerRender: (mark) {
                  print(mark.seriesIndex);
                  if (chartCustomData[mark.seriesIndex!].y! <
                      chartCustomData.last.y!) {
                    mark.color = Colors.red;
                    mark.markerHeight = 10;
                    mark.markerWidth = 10;
                  }
                },
                enableAxisAnimation: true,
                title: ChartTitle(text: 'My Trade'),
                trackballBehavior: _trackballBehavior,
                // onMarkerRender: (markerArgs) {},
                primaryXAxis: NumericAxis(
                  tickPosition: TickPosition.outside,
                  isVisible: true,
                  // interval: 1,
                  // autoScrollingDelta: 10,
                  // autoScrollingMode: AutoScrollingMode.start,
                  interactiveTooltip: const InteractiveTooltip(
                    enable: false,
                    canShowMarker: true,
                  ),
                ),

                crosshairBehavior: _crosshairBehavior,

                // onTooltipRender: (TooltipArgs args) {
                //   args.text = 'Customized Text';
                //
                //   print(
                //       '----- ${args.locationX} ${args.locationY}');
                // },
                series: <CartesianSeries<ChartSampleData, num>>[
                  FastLineSeries<ChartSampleData, num>(
                    animationDelay: 0,
                    isVisible: true,
                    markerSettings: const MarkerSettings(
                      isVisible: true,
                      color: Colors.green,
                    ),
                    // borderColor: Colors.blue,
                    gradient: const LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Color(0xff42497d),
                        Color(0xff21265d),
                      ],
                    ),

                    animationDuration: 0,
                    enableTooltip: true, opacity: 1,
                    onRendererCreated: onController,
                    dataSource: chartCustomData,
                    xValueMapper: (ChartSampleData data, _) => data.x,
                    yValueMapper: (ChartSampleData data, _) => data.y,
                  ),
                ],
              ),
            ),
            SizedBox(
              width: width / 5,
              height: height / 2,
            )
          ],
        ),
        ...stackList,
      ],
    );
  }

  Future<List<ChartSampleData>> updateData() async {
    y = Random().nextInt(85000);
    x = x! + 20;

    chartCustomData.add(
      ChartSampleData(
        x: x,
        y: y,
      ),
    );

    if (chartCustomData.length > 20) {
      chartCustomData.removeAt(0);
      _controller?.updateDataSource(
        addedDataIndex: chartCustomData.length - 1,
        removedDataIndex: 0,
      );
    } else {
      _controller?.updateDataSource(
        addedDataIndex: chartCustomData.length - 1,
      );
    }
    index = chartCustomData.length - 1;

    return chartCustomData;
  }

  List<ChartSampleData> chartCustomData = <ChartSampleData>[
    ChartSampleData(x: 10, y: 15),
    ChartSampleData(x: 15, y: 30),
    ChartSampleData(x: 30, y: 45),
    ChartSampleData(x: 40, y: 37),
    ChartSampleData(x: 45, y: 67),
    ChartSampleData(x: 50, y: 87),
    ChartSampleData(x: 60, y: 57),
    ChartSampleData(x: 70, y: 97),
    ChartSampleData(x: 80, y: 07),
    ChartSampleData(x: 85, y: 117),
  ];

}


class ChartSampleData {
  int? x, y;
  ChartSampleData({this.x, this.y});
}

[md zeeshan iqbal]

i wanna add marker at the end of the data  not at every points  

[Yuvaraj Gajaraj]

Hi md Zeeshan Iqbal, 

 

We are analyzing the reported scenario, and we will update the status in one business day (17 Nov 2021). We appreciate your patience until then. 

 

Regards, 

Yuvaraj. 

[Yuvaraj Gajaraj]

Hi md Zeeshan Iqbal, 

 

Greetings from Syncfusion. We have analyzed your query, and your requirement to show marker only at the end points can be achieved with a workaround. But as of now, we are having an issue with the workaround. We have considered this as a bug, and it will be fixed and rolled out in our weekly patch release expected at 23^rd Nov 2021. 

 

Regards, 

Yuvaraj. 

[Sriram Kiran Senthilkumar]

Hi md zeeshan Iqbal, 

 

Thanks for your patience. When our development team forward to fix the issue, they found that the issue is resolved with the sample level itself. We have achieved your requirement regarding to show marker only at the end of the data using a workaround with the help of onCreateRenderer callback and also attached the workaround sample link below for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170345/ze/markerevent_realtimechart1396857505 

  

Please check with the above sample and revert us if you still have further concerns. 

 

For further reference on onCreateRenderer callback, please check the API link below. 

https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/CartesianSeries/onCreateRenderer.html 

 

Regards, 

Sriram Kiran