Formatting large numbers

[Hvass-Labs]

I have a plot with very large numbers on the y-axis that I want shown with denominators like K for Kilo, M for Million, B for Billion, etc. This can be done using the following number-formatter:

const bigNumberFormat = Intl.NumberFormat('en', { notation: 'compact' });

Plot.plot({
    y: {
        tickFormat: (x) => bigNumberFormat.format(x),
    },

    // ...
    });

But I would like to use the same denominator for all numbers on the y-axis so it doesn't mix e.g. M and B. The denominator could be determined e.g. from the max number shown on the y-axis. Is this possible?

Side question if you just happen to know the answer: Is it possible to get Intl.NumberFormat to write small letters instead of capital letters e.g. "3b" instead of "3B"?

Thanks!

[Fil]

If you use tickFormat: "s", you should get the same unit for every tick.

Otherwise, you'll need to write a custom function that takes the maximum value, derives the symbol for the top tick, and formats each tick accordingly. The tickFormat function receives all the necessary information in its arguments.

To display the unit suffixes in lowercase, you could use CSS (simplest method), or explore a custom function maybe based on Intl.NumberFormat.formatToParts. But note that it could introduce ambiguities: 3m is supposed to represent 3 milli, not 3 mega, if you're using SI.

[Hvass-Labs]

Thanks! I could have imagined that you have built-in functionality for this :-)

However, I need different units than you're using. Specifically I need Trillion T=1e12, Billion B=1e9, Million M=1e6, Kilo K=1e3. These are typical units in many applications. The only difference is that you use Giga G=1e9 instead of Billion B. Is there any way to get these units with a built-in tickFormat or would you consider adding it?

I prefer that trailing zeros are removed as done by Intl.NumberFormat e.g. so 3.0B just becomes 3B.

Ideally the units could also be made lower-case because I personally prefer that, but I can accept upper-case if that's a hassle. When using Intl.NumberFormat, I thought there was some clever option to do it, but it later struck me that the easiest thing is of course just to call: bigNumberFormat.format(x).toLowerCase(); in the code above :-)

If I need to write a custom formatter, could you tell me how I get the values for the ticks on the y-axis?

Thanks again!

[Fil]

values for the ticks

it's the third argument

[Hvass-Labs]

The third argument of what?

[Fil]

of the custom function… tickFormat: (tick, index, ticks) => console.log(ticks)

[Hvass-Labs]

I will leave this question open for now. I wish you would make a built-in format that replaced G for Giga with B for Billion. That is the standard in many non-scientific applications. Thanks!