We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply the currency format to the axis labels (SfCartesianChart) ?

Platform: Flutter |
Control: SfCartesianChart |
Published Date: May 12, 2020 |
Last Revised Date: April 8, 2021

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: <ChartSeries<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: <ChartSeries<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

 

Axis labels in currency representation

 

Compact axis labels with currency symbol

 

Compact axis labels with currency symbol

 

Compact axis labels without currency symbol

 

Compact axis labels without currency symbol

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

 

View the sample in GitHub

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile