Articles in this section
Category / Section

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

 

Screenshots

 

Axis labels with customized text

 

Axis labels with customized text Flutter Cartesian Chart

 

Axis labels in customized text styles

 

Axis labels in customized text styles Flutter Cartesian Chart

 

For further reference axisLabelFormatter event, find the user guide here.

 

View the sample in GitHub

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied