How to apply the currency format to the axis labels SfCartesianChart in Flutter ?

In this article, we described how to apply the currency format to the numeric axis labels. 

Flutter Cartesian chart widget provides support for applying currency format to the numeric axis labels in various representations. This can be achieved using the numberFormat property of an axis. There are two types of methods that can be used to format the numeric axis labels in currency format such as

• NumberFormat.currency() - For formatting the currency values in locales currency pattern e.g. “INR1,21,000.00” instead of “121000”. In this method, you can control the representations such as decimal digits, name, locales, currency pattern, and symbols.
• NumberFormat.compactCurrency() - For formatting the currency values in compact representations e.g. "$1.2M" instead of "$1,200,000". In this method, you can control the decimal digits as per required and you can also provide the symbol of currency as a parameter to the method, in order to replace the default currency symbol i.e., “$”.

Currency representation

The following steps explain how to use the NumberFormat.currency method in the numberFormat property of an axis.

Step 1: First, import the intl.dart package in your project.

import 'package:intl/intl.dart';

Step 2: Initialize the Cartesian chart widget with the required properties and initialize the numberFormat property using the NumberFormat.Currency() method.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(
                  //Formatting the labels in locale’s currency pattern with symbol.
                  numberFormat: NumberFormat.currency(
                    locale: 'en_In',
                    symbol: "₹"
                ),
                series: <LineSeries<ChartData, String>>[
                  LineSeries<ChartData, String>(
                      dataSource: chartData,
                      xValueMapper: (ChartData sales, _) => sales.value2,
                      yValueMapper: (ChartData sales, _) => sales.value1,
                  )
                ]
            ),

Compact currency representation

The following steps explain how to use the NumberFormat.compactCurrency method in the numberFormat property of an axis.

Step 1: First, import the intl.dart package in your project.

import 'package:intl/intl.dart';

Step 2: Initialize the Cartesian chart widget with the required properties and initialize the numberFormat property using the NumberFormat.compackCurrency() method.

SfCartesianChart(
                primaryXAxis: CategoryAxis(),
                primaryYAxis: NumericAxis(
                  //Formatting the labels to compact representations.
                  numberFormat: NumberFormat.compactCurrency(
                    symbol: '\$',
                    decimalDigits: 1
                  ),
                ),
                series: <LineSeries<ChartData, String>>[
                  LineSeries<ChartData, String>(
                      dataSource: chartData,
                      xValueMapper: (ChartData sales, _) => sales.value2,
                      yValueMapper: (ChartData sales, _) => sales.value1,
                  )
                ]
            ),

If you do not want any symbols to be prefixed to the axis labels, you can also set the symbol property of the compactCurrency() method as null or emptyString('')as follows.

SfCartesianChart(
                primaryYAxis: NumericAxis(
                  numberFormat: NumberFormat.compactCurrency(
                    symbol: '',
                  ),
                ),
)

Screenshots

Axis labels in currency representation

Compact axis labels with currency symbol

Compact axis labels without currency symbol

For more information on numberFormat property, find the user guide.

View the sample in GitHub

Conclusion

I hope you enjoyed learning about how to  apply the currency format to the axis labels SfCartesianChart in Flutter.

You can refer to our Flutter Cartesian Chart featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our demo to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!