Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Format y-axis numbers as thousands or millions #120

Closed
mithunadhikari40 opened this issue May 3, 2020 · 3 comments
Closed

Format y-axis numbers as thousands or millions #120

mithunadhikari40 opened this issue May 3, 2020 · 3 comments

Comments

@mithunadhikari40
Copy link

First of all I want to thank you guys for this wonderful library. I am using this to display some bar chart and I am wondering if there is any possibility for showing numbers in y-axis in a formatted way. For example:
16432 => 16K
1,000,000 => 1.00M
1,234,567 => 1.23M.

Here is a snapshot of the code I am using.

<BarSeries<ReportDataModel, String>>[
      BarSeries<ReportDataModel, String>(
          enableTooltip: true,
          dataSource: targetList,
          xValueMapper: (ReportDataModel sales, _) => sales.objectName,
          yValueMapper: (ReportDataModel sales, _) => sales.value,
          name: AppLocalizations.of(context).Total_Sales),
      BarSeries<ReportDataModel, String>(
          enableTooltip: true,
          dataSource: quantityList,
          xValueMapper: (sales, _) => sales.objectName,
          yValueMapper: (sales, _) => sales.value,
          name: AppLocalizations.of(context).target),
    ]

Here in the yValueMapper is there any way to show sale.value as formatted string like 16K or 1.23M rather than the actual numbers like 16000 or 1230000

Thank you.

@SriramKiranSenthilkumar
Copy link
Contributor

Hi @mithunadhikari40 ,

Thanks for your interest in Syncfusion charts. We have analyzed your scenario and we have created a simple sample in order to format the axis labels from showing numbers to compact representations using the numberFormat property available in the axis. Please refer the code snippet below.

SfCartesianChart(
            primaryYAxis: NumericAxis(
              numberFormat: NumberFormat.compact()
            ),
)

Screenshot:
image

And, also for formatting the axis labels with two decimal digits in compact representation, please refer the code snippet below to achieve it.

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

Screenshot:
image

The sample for reference can be found below.
sample.zip

Thanks,
Sriram Kiran.

@mithunadhikari40
Copy link
Author

@SriramKiranSenthilkumar Thank you so much. This is exactly what I need. You guys are the best. I am going to close this issue.

@mmgunes
Copy link

mmgunes commented Oct 7, 2022

thank you @SriramKiranSenthilkumar 👏🏼👏🏼👏🏼👏🏼👏🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants