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

2 mins read

In this article, we describe how to customize the axis labels using callback events in the Syncfusion® Flutter Cartesian charts.

The Flutter Cartesian Chart widget provides support for customizing axis labels through callback events. A callback event is a function or method passed as an argument to another function that executes when needed. The chart widget offers the axisLabelFormatter callback event specifically for customizing axis labels according to your requirements.

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 enhance readability, you can modify the displayed text by suffixing or prefixing content using the text argument from the event.

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