Add '%' to labels?

[Richard Coutts]

I see NumericAxis has a nice labelFormat param for additional characters like a '%' sign. Is there the equivalent in SFCircularChart? I'm working with the sample app code and my chart looks like this: 

I'd like to add a '%' after each number. Is that possible? Here's my code for the labels:

List<DoughnutSeries<ChartSampleData, String>> _getDonutSeries(List<ChartSampleData> chartData) {

  return <DoughnutSeries<ChartSampleData, String>>[

    DoughnutSeries<ChartSampleData, String>(

        dataSource: chartData,

        xValueMapper: (ChartSampleData data, _) => data.x,

        yValueMapper: (ChartSampleData data, _) => data.y,

        startAngle: 90,

        endAngle: 90,

        dataLabelSettings: DataLabelSettings(isVisible: true, labelPosition: ChartDataLabelPosition.inside)),

  ];

}

[Sriram Kiran Senthilkumar]

Hi Richard, 

 

Greetings from Syncfusion. We have analyzed your scenario with the provided information at our end and in order to format the data label content in the circular charts, you can use either the datalabelMapper method or the onDataLabelRender callback event available in the SfCircularChart. Please refer the code snippets below for further reference. 

Using datalabelMapper:  

SfCircularChart( 

series: <CircularSeries<_SalesData, String>>[ 

              DoughnutSeries<_SalesData, String>( 

                  dataSource: <_SalesData>[ 

                    // provided data label text with '%' as suffix. 

                    _ChartData('Jan', 22.2, '22.2%', Colors.blueGrey), 

                    _ChartData('Feb', 22.2, '22.2%', Colors.green), 

                    _ChartData('Mar', 55.6, '55.6%', Colors.blue), 

                  ], 

                  xValueMapper: (_ChartData sales, _) => sales.year, 

                  yValueMapper: (_ChartData sales, _) => sales.sales, 

                  pointColorMapper: (_ChartData sales, _) => sales.color, 

                  // mapped the data label from the chart data source to the chart. 

                  dataLabelMapper: (_ChartData sales, _) => sales.text, 

                  dataLabelSettings: DataLabelSettings(isVisible: true)) 

                  // Your configurations 

            ]) 

) 

 

Using the onDataLabelRender event: 

SfCircularChart( 

      // Formatted the data label text using onDataLabelRender event 

      onDataLabelRender: (args) { 

              args.text = '${args.text}%'; 

      }, 

series: <CircularSeries<_SalesData, String>>[ 

              DoughnutSeries<_SalesData, String>( 

                  dataSource: chartData, 

                  xValueMapper: (_ChartData sales, _) => sales.year, 

                  yValueMapper: (_ChartData sales, _) => sales.sales, 

                  dataLabelSettings: DataLabelSettings(isVisible: true)) 

                  // Your configurations 

            ]) 

 

) 

 

Screenshot:  

 

 

We have also attached simple circular chart sample below in which we have used both the methods of formatting the data label text in the circular charts. 

Sample: https://www.syncfusion.com/downloads/support/forum/160592/ze/f160592_sample100176753 

  

For further reference on the datalabelMapper method and onDataLabelRender event, please check the user guide below. 

·        datalabelMapper - https://help.syncfusion.com/flutter/circular-charts/datalabel#formatting-label-content 

·        onDataLabelRender - https://help.syncfusion.com/flutter/circular-charts/callbacks#ondatalabelrender 

Please get in touch with us if you would require further assistance on this. 

Regards, 

Sriram Kiran 

[Richard Coutts]

Ah. Perfect. I wasn't sure what the mapper overrides were doing but see clearly now. A very nice and flexible way to modify labels. Thanks!

[Sriram Kiran Senthilkumar]

Hi Richard, 

  

Most welcome. Kindly revert us if you have any queries. We are always happy in assisting you. 

  

Regards, 

Sriram Kiran