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.

Flutter Cartesian chart widget provides support for customizing the data labels in the chart using callback events. Callback Events are Callback functions or methods which we pass as an argument into another function or method and can perform an action when we require it. Likewise, chart widget provides callback event called OnDataLabelRender to customize the data labels as required.

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