How to customize the axis labels using callback events (SfCartesianChart) ?

2 mins read

In this article, we described how to customize the axis labels using the callback events in the Cartesian charts.

The Flutter Cartesian Chart widget provides support for customizing the axis labels in the chart using the callback events on rendering. A callback event is a callback function or method, which you pass as an argument in another function or method and can perform an action when you require it. Likewise, the chart widget provides a callback event called axisLabelFormatter to customize the axis labels as required.

Refer the following instructions, to customize the axis label using the callback event in the following ways:

Customize text of the axis labels

Step 1: Initialize the SfCartesianChart with all the required properties.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                series: <LineSeries<SalesData, String>>[
                  LineSeries<SalesData, String>(
                      dataSource: <SalesData>[
                        SalesData(1, 35),
                        SalesData(2, 28),
                        SalesData(3, 34),
                        SalesData(4, 32),
                        SalesData(5, 40),
                      ],
                      xValueMapper: (SalesData sales, _) => sales.year,
                      yValueMapper: (SalesData sales, _) => sales.sales)
                ]
)

Step 2: Define the axisLabelFormatter event in the primaryXAxis. To customize the displaying text of the axis labels in the chart like suffixing or prefixing some texts, you can use the text argument from the event to improve the readability.

primaryXAxis: CategoryAxis (
            axisLabelFormatter: (AxisLabelRenderDetails args) { 
                  args.text = '${args.text}st\nMonth';
)

Customize text style of the axis labels

Step 1: Initialize the SfCartesianChart with all 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)
                ]
)

Step 2: Define the axisLabelFormatter event in the primaryXAxis and you can customize the axis labels style with argument such as text, textStyle, axisName, and axis.

primaryXAxis: CategoryAxis (
                axisLabelFormatter: (AxisLabelRenderDetails args) {
                  late String text;
                  late TextStyle textStyle;
                    text = '${args.text}st\nMonth';
                    if (args.text == 'Jan')
                      textStyle =
                          args.textStyle.copyWith(fontFamily: 'DancingScript');
                    if (args.text == 'Feb')
                      textStyle = args.textStyle.copyWith(color: Colors.green);
                    if (args.text == 'Mar')
                      textStyle = args.textStyle.copyWith(fontSize: 15);
                    if (args.text == 'Apr')
                      textStyle =
                          args.textStyle.copyWith(fontStyle: FontStyle.italic);
                    if (args.text == 'May')
                      textStyle =
                          args.textStyle.copyWith(fontWeight: FontWeight.bold);
                  
                  return ChartAxisLabel(text, textStyle);
                },
)