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

2 mins read

In this article, we described how to customize the data label using events in cartesian charts.

The Flutter Cartesian chart widget provides support for customizing data labels through callback events. Callback events are functions or methods passed as arguments into another function that can perform actions when required. The chart widget provides the onDataLabelRender callback event to customize data labels as needed.

Refer the following instructions to customize the data label using its callback event in the following ways.

Customize text of the data labels

Step 1: Initialize the SfCartesianChart with the required properties.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      dataSource: ChartData,
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      //Enable datalabel settings
                      dataLabelSettings: DataLabelSettings(isVisible: true)
                  )
                ]
  )

Step 2: Define the onDataLabelRender event in the SfCartesianChart. To customize the displaying text of the data labels in the chart, you can use the text argument from the event for suffixing or prefixing some texts to improve the readability.

SfCartesianChart(
                onDataLabelRender: (DataLabelRenderArgs args) {
                   args.text = '${args.text}\nSold';
                },
)

Customize text style of the data labels

Step 1: Initialize the SfCartesianChart with the required properties.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      dataSource: ChartData,
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      //Enable datalabel settings
                      dataLabelSettings: DataLabelSettings(isVisible: true)
                  )
                ]
  )

Step 2: Define the onDataLabelRender event in the SfCartesianChart. To customize the text style properties of the data labels in the chart, you can use the textStyle argument from the event and customize the values such as color, fontFamily, fontSize, fontStyle, fontWeight.

SfCartesianChart(
                onDataLabelRender: (DataLabelRenderArgs args) {
                   TextStyle? textStyle = args.textStyle;
                   if(args.pointIndex == 0) {
                    args.textStyle.copyWith(color: Colors.orange[700]);
                  }
                  if(args.pointIndex == 1) {
                    textStyle =
                        args.textStyle.copyWith(fontFamily: 'DancingScript');
                  }
                  if(args.pointIndex == 2) {
                    textStyle = args.textStyle.copyWith(fontSize: 20);
                  }
                  if(args.pointIndex == 3) {
                    textStyle =
                        args.textStyle.copyWith(fontStyle: FontStyle.italic);
                  }
                  if(args.pointIndex == 4) {
                    textStyle =
                        args.textStyle.copyWith(fontWeight: FontWeight.bold);
                  }
                  args.textStyle = textStyle ?? args.textStyle;
                },
)

Customize different background colours for different data labels

The following steps explain how to use the OnDataLabelRender event to customize background color of the data labels in the Cartesian chart.

Step 1: Initialize the Cartesian chart widget with the required properties.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      dataSource: ChartData,
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales,
                      //Enable datalabel settings
                      dataLabelSettings: DataLabelSettings(isVisible: true)
                  )
                ]
  )

Step 2: Define the onDataLabelRender event in the SfCartesianChart. You can customize the background colors of the data labels with argument such as color and pointIndex.

SfCartesianChart(
            onDataLabelRender: (DataLabelRenderArgs args) {
                   if(args.pointIndex == 0) {
                    args.color = Colors.red;
                  }
                  if(args.pointIndex == 1) {
                    args.color = Colors.blue;
                  }
                  if(args.pointIndex == 2) {
                    args.color = Colors.yellow;
                  }
                  if(args.pointIndex == 3) {
                    args.color = Colors.green;
                  }
                  if(args.pointIndex == 4) {
                    args.color = Colors.brown;
                  }
            },
)