Modifying big number prefixes

amCharts' number formatter has a way of formatting numbers in a variety of ways, including converting to prefix/suffix-based shorter equivalents. This tutorial will explain how you can tweak it according to your needs.

The problem

Extremely big numbers on a chart can be confusing and wasteful of space:

Let's see how we can fix that.

Applying digit grouping

Number formatter, available in each chart via numberFormatter property, can be set up to automatically group big numbers into shorter, more readable versions.

To enable number formatting like this, we can use "a" keyword in numberFormat:

chart.numberFormatter.numberFormat = "#a";

chart.numberFormatter.numberFormat = "#a";

{
  // ...
  "numberFormatter": {
    "numberFormat": "#a"
  }
}

SIDE READING For more information about how numbers are formatted, please visit our "Formatting Numbers" article.

Let's see how that affects our chart:

As we can see our numbers now look manageable. The "G" suffix is a scientific denomination of "billions".

That too can be changed according to your needs, as we will learn in the next chapter.

Modifying suffixes

Suffixes and number scales they are applied at are listed in number formatters bigNumberPrefixes.

Let's see how the default looks:

[
  { "number": 1e+3, "suffix": "k" },
  { "number": 1e+6, "suffix": "M" },
  { "number": 1e+9, "suffix": "G" },
  { "number": 1e+12, "suffix": "T" },
  { "number": 1e+15, "suffix": "P" },
  { "number": 1e+18, "suffix": "E" },
  { "number": 1e+21, "suffix": "Z" },
  { "number": 1e+24, "suffix": "Y" }
]

NOTE The above suffixes are for default "International English" locale. If you are using some other locale, these defaults may differ.

As you can see it's an array of objects each indicated the next step in big number grouping ladder.

Numbers with three zeros will be divided by 1,000 and "k" will be applied.

Numbers with six zeroes (millions) will be divided by 1,000,000 and the "M" suffix will be added.

And so on all the way to "Y" for numbers that are 24 digits or longer, which any normal person does not need to name for.

To modify suffixes, all we need to do is to modify the bigNumerPrefixes.

Let's say we don't like "G" that indicates billions. We want to use "B" instead. So we do this:

chart.numberFormatter.numberFormat = "#a";
chart.numberFormatter.bigNumberPrefixes = [
  { "number": 1e+3, "suffix": "K" },
  { "number": 1e+6, "suffix": "M" },
  { "number": 1e+9, "suffix": "B" }
];

chart.numberFormatter.numberFormat = "#a";
chart.numberFormatter.bigNumberPrefixes = [
  { "number": 1e+3, "suffix": "K" },
  { "number": 1e+6, "suffix": "M" },
  { "number": 1e+9, "suffix": "B" }
];

{
  // ...
  "numberFormatter": {
    "numberFormat": "#a",
    "bigNumberPrefixes": [
      { "number": 1e+3, "suffix": "K" },
      { "number": 1e+6, "suffix": "M" },
      { "number": 1e+9, "suffix": "B" }
    ]
  }
}

Now thousands will appear with uppercase "K", millions with "M", and billions with a "B".

Since we omitted any bigger number prefixes, all bigger numbers will be formatted as a larges denominator - billion with a "B".

Let's see how our code below changes our test chart:

Mission accomplished!

Live example

See the Pen amCharts 4: prefixes of big numbers by amCharts team (@amcharts) on CodePen.0