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.
Unfortunately, activation email could not send to your email. Please try again.

# 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
Tags:

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

#### Compact axis labels without currency symbol

View the sample in GitHub