How to display one datalabel

[wz-wenchao]

Use case

when I display one label, the line are all displayed, how to display only one

Proposal

[wz-wenchao]

by the way, the code show one label :

dataLabelSettings: DataLabelSettings(
    isVisible: true,
    labelPosition: ChartDataLabelPosition.outside,
    labelIntersectAction: LabelIntersectAction.none,
    builder: (data, point, series, pointIndex, seriesIndex) {
         if (selectIndex != pointIndex) {
               return const SizedBox();
          }
          return Column();
    },
),

is this right ?

[BPraveenBalu]

Hi @wz-wenchao,

Thank you for your update, and we're glad to see you're exploring solutions on your own. You're right that using the builder property in DataLabelSettings allows you to control the rendering of the label widget. However, it's important to note that this approach only affects the label content, not the connector line. Even if you return an empty widget like SizedBox(), the connector line may still be drawn if isVisible is set to true.

To fully hide both the label and the connector line, we recommend using the onDataLabelRender callback instead. This gives you complete control over both the label text and the connector line style. This callback allows you to conditionally modify the data labels based on the pointIndex.

UG link: https://help.syncfusion.com/flutter/circular-charts/callbacks#ondatalabelrender

Code snippet:

child: SfCircularChart(
  onDataLabelRender: (DataLabelRenderArgs args) {
    if (args.pointIndex == 1) {
      args.text = '${args.dataPoints![args.pointIndex].x}: ${args.dataPoints![args.pointIndex].y}%';             
    } else {
      args.text = '';
    }
  },

Regards,
Praveen Balu.

[wz-wenchao]

I tried, and it worked, but get another question -> can't modify the layout
if override the builder, it won't work

[Mugunthan-Ramalingam]

Hi @wz-wenchao,

We’ve a knowledge base article that explains how to customize data labels in SfCartesianChart using onDataLabelRender callback. This includes modifying label text, applying different text styles, and setting individual background colors based on pointIndex. We have shared it below for your reference. You can refer this knowledge base and achieve your requirements.

KB link: How to customize data labels using callback events (SfCartesianChart) ?

If you have any further queries, please get back to us. We are always happy to assist you.

Regards,
Mugunthan.

[wz-wenchao]

This can achieve simple layouts, but it cannot handle complex ones. I think adding a separate method to set that line is the simplest approach and won't conflict with the builder method.