onMarkerRendere null error in area series

[Zeeshan-progs]

source code

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

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

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

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

class _chartState extends State {
int? x = 10;
int? y = 15;
Timer? timer;
int index = 0;
@OverRide
void dispose() {
timer!.cancel();
super.dispose();
}

List 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,
);
}

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 latLong = [];

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

List 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) {
if (mark.seriesIndex == chartCustomData.length - 2) {
mark.color = Colors.red;
}
},
enableAxisAnimation: true,
title: ChartTitle(text: 'My Trade'),
trackballBehavior: _trackballBehavior,
// onMarkerRender: (markerArgs) {},
primaryXAxis: NumericAxis(
tickPosition: TickPosition.outside,
isVisible: true,
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>>[
              AreaSeries<ChartSampleData, num>(
                animationDelay: 0,
                isVisible: true,
                markerSettings: const MarkerSettings(
                  isVisible: true,
                  // color: Colors.transparent,
                  // height: 0,
                  // width: 0,
                ),
                borderColor: Colors.blue,
                gradient: const LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0xff42497d),
                    Color(0xff21265d),
                  ],
                ),
                /* markerSettings: const MarkerSettings(
                                  isVisible: true,
                                  shape: DataMarkerType.circle,
                                  color: Colors.amber,
                                  height: 5,
                                  width: 5,
                                  borderColor: Colors.orangeAccent,
                                ),*/
                animationDuration: 0,
                enableTooltip: true, opacity: 1,
                onRendererCreated: onController,
                dataSource: chartCustomData,
                xValueMapper: (ChartSampleData data, _) => data.x,
                yValueMapper: (ChartSampleData data, _) => data.y,
                // dataLabelSettings: DataLabelSettings(
                //   connectorLineSettings: ConnectorLineSettings(
                //     type: ConnectorType.curve,
                //     color: Colors.cyan,
                //   ),
                // ),
              ),
            ],
          ),
        ),
        SizedBox(
          width: width / 5,
          height: height / 2,
        )
      ],
    ),
    ...stackList,
  ],
);

}

Future<List> 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 chartCustomData = [
ChartSampleData(x: 10, y: 15),
ChartSampleData(x: 20, y: 30),
ChartSampleData(x: 30, y: 45),
ChartSampleData(x: 40, y: 77),
];

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

• logs

======== Exception caught by rendering library =====================================================
The following _CastError was thrown during paint():
Null check operator used on a null value

The relevant error-causing widget was:
SfCartesianChart SfCartesianChart:file:///E:/Bitbucket/trading/lib/chart.dart:131:40
When the exception was thrown, this was the stack:
#0 triggerMarkerRenderEvent (package:syncfusion_flutter_charts/src/chart/utils/helper.dart:2809:66)
#1 MarkerSettingsRenderer.renderMarker (package:syncfusion_flutter_charts/src/chart/common/marker.dart:333:17)
#2 SeriesRendererDetails.renderSeriesElements (package:syncfusion_flutter_charts/src/chart/chart_series/series_renderer_properties.dart:298:33)
#3 AreaChartPainter.paint (package:syncfusion_flutter_charts/src/chart/series_painter/area_painter.dart:349:31)
#4 RenderCustomPaint._paintWithPainter (package:flutter/src/rendering/custom_paint.dart:563:13)
#5 RenderCustomPaint.paint (package:flutter/src/rendering/custom_paint.dart:605:7)
#6 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
#7 PaintingContext.paintChild (package:flutter/src/rendering/object.dart:189:13)
#8 RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:140:15)
#9 RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2409:7)
#10 PaintingContext._repaintCompositedChild (package:flutter/src/rendering/object.dart:141:11)
#11 PaintingContext.repaintCompositedChild (package:flutter/src/rendering/object.dart:100:5)
#12 PipelineOwner.flushPaint (package:flutter/src/rendering/object.dart:979:29)
#13 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:455:19)
#14 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
#15 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:319:5)
#16 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1143:15)
#17 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1080:9)
#18 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:996:5)
#22 _invoke (dart:ui/hooks.dart:166:10)
#23 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:270:5)
#24 _drawFrame (dart:ui/hooks.dart:129:31)
(elided 3 frames from dart:async)
The following RenderObject was being processed when the exception was fired: RenderCustomPaint#d40c3 relayoutBoundary=up2
... parentData: (can use size)
... constraints: BoxConstraints(0.0<=w<=309.1, 0.0<=h<=528.5)
... size: Size(0.0, 0.0)
RenderObject: RenderCustomPaint#d40c3 relayoutBoundary=up2
parentData: (can use size)
constraints: BoxConstraints(0.0<=w<=309.1, 0.0<=h<=528.5)
size: Size(0.0, 0.0)

[SriramKiranSenthilkumar]

Hi @Zeeshan-progs,

Thanks for the patience. The reported issue regarding getting exception while enable onMarkerRender callback in the real time chart has been fixed and rolled out in our weekly patch release. To resolve this, kindly upgrade the chart widget package to the latest version below.

Version: https://pub.dev/packages/syncfusion_flutter_charts/versions/19.3.55

Regards,
Sriram Kiran