need widget on onMarkerRender

[keskink]

Use case

need to add widget to onMarkerRender event. I need to add conditional marker to some specific data. for example my data has 0 value in xAxis value, I want to set a start icon at the position. and I want to set a flag icon at to included 100 on data position

Proposal

I set only icon. But widget would be good.

onMarkerRender: (args) { var data = flights[0].flightData.firstWhere((element) => element.index == args.pointIndex); // Check your specific condition if (data.time == grnd ) { args.shape = DataMarkerType.image; args.image = Icons.flight_takeoff_sharp; } else if (data.time == 100 ) { args.shape = DataMarkerType.image; args.image = Icons.flag; } else { args.markerHeight = 0; args.markerWidth = 0; args.borderWidth = 0; } },

[PreethikaSelvam]

Hi @keskink,

You can achieve your requirement with the help of builder property of dataLabelSettings. Additionally, by using the labelAlignment property you can align the label based on your requirement.

UG Link: https://help.syncfusion.com/flutter/cartesian-charts/marker-datalabel#label-template

Please let us know if you need any further assistance.

Regards,

Preethika Selvam.

[keskink]

Hi @PreethikaSelvam,

First of all thanks for your valued answer.

But unfortunately your solution not working for me. Because the each labels not showing on chart. My code as like this. it should work, but not working due to https://www.syncfusion.com/feedback/37565 issue.

  markerSettings: const MarkerSettings(isVisible: false),
    dataLabelSettings: DataLabelSettings(
        isVisible: true,
        // Templating the data label
        builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) {
          if (series!.dataSource![pointIndex].index == flights[0].groundPosition) {
            return Container(
              //height: 30,
              //width: 30,
              child: const Icon(Icons.flight_takeoff_sharp),
            );
          }
          else {
            return SizedBox();
          }
        }
    )

[LokeshPalani]

Hi,

You can achieve your requirement by setting the LabelIntersectAction to LabelIntersectAction.none in the DataLabelSettings. By doing this, the data labels will not hide when intersecting. We have shared a code snippet for your reference. Please let us know if you have any further needs.

Code Snippet:

dataLabelSettings: DataLabelSettings(
              isVisible: true,
              builder: (data, point, series, pointIndex, seriesIndex) {
                return const Icon(Icons.circle);
              },
              labelIntersectAction: LabelIntersectAction.none,
            ),

Regards, Lokesh P.