Automatically format large axis label values

[JaRoberts512]

Not sure how to best search for existing issues of this description but I've done my best! Don't think this is a duplicate.

I'm currently working on a project where the max value on the x axis can get very large (in the scale of hundreds of millions).

It would be useful to have a boolean value in axis props which automatically divides axis label values, and adds the correct prefix to the unit (K, M, G, etc). This would be fairly simple if this could be based on the number of digits in dataMax.

I know this is something that you could do to the data beforehand with a mapping function, but then when using the brush component, a zoom function, or plotting differently scaled data, the scale would stay high when you scale the axis to the smaller end.

[ckifer]

Doing something like this is easy, but it gets difficult because it's opinionated.

For example, if we made it possible to auto format values with a flag it might be good enough for one or two people but if someone lives in another country and wants to format labels differently then they cannot. We can make the api support multiple formats but that's more work over time.

Right now, one can use the formatter functions on the axes with unformatted, unmapped data and format ticks their preferred way.

I'll label this a feature request but since the ability to customize exists I'm not sure the priority this will be. Thanks!

[JaRoberts512]

This is true, seems like one of those things that sounds like an easy no-brainer at first but could be an ever expanding rabbit hole for whoever picks up this issue!

Perhaps the docs around the tickFormatter function could be expanded on for now? I'm not familiar with this function

[ckifer]

Yeah, exactly. What would make sense iteratively would be to find the most common implementation and do the first, make it the default, and add more as needed from there.

The docs definitely need some attention yep!

[ckifer]

For now I'll link this which is a recent example of a tickFormatter #4371 (reply in thread)

Its just a function of the form (value) => string; where string is your formatted tick

[graup]

I agree, it makes sense to have this user-defined. There are just too many cases, depending on the exact use case.

By the way, Intl.NumberFormat is really powerful for this.

We could add some more examples on using tickFormatter. Here's one I'm using for money values:

function formatCurrency(value: string | number) {
  return Number(value).toLocaleString('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: 2,
    maximumSignificantDigits: 3,
    roundingPriority: "lessPrecision",
  });
}

tickFormatter={formatCurrency}

Example output:

-> [0.233, 1.541, 12.322, 443.121, 987.1234, 1212.11, 4442.12, 43454.2112].map(formatCurrency)
<- ['$0.23', '$1.54', '$12.3', '$443', '$987', '$1,210', '$4,440', '$43,500']

Here's one for the "K" notation:

-> [0.233, 12.322, 987.1234, 1212.11, 4442.12, 43454.2112, 717221712].map(value => Number(value).toLocaleString('en-US', {
    notation: "compact",
    maximumFractionDigits: 0,
    maximumSignificantDigits: 1,
    roundingPriority: 'lessPrecision',
  }))
<- ['0', '10', '1K', '1K', '4K', '40K', '700M']

[JaRoberts512]

Thanks @graup, this is a very powerful object constructor here, in hindsight, something like this is probably the best possible way of tick formatting, as I feel any more specificity would be too complex to be worthwhile, and any less wouldn't give enough customisation options to the user.

I think it would be worth simply noting the parameter and return of the tickFormatter function, as simple as it is, to the api section in the docs, and maybe including an example chart with a currency x-axis in the examples or storybook.