Recharts set Y-axis value base of number displayed

Question

Hi I'm trying to use Recharts to display some data but I have ran into a problem. The numbers I'm tying to display are too big and my Y-axis gets cut off by the webpage. Is their a way to set or customize the Y-axis values to display 10K, 10M and etc instead of 10,000 and 10,000,000 depending on the data?

Answer 1

There isn't a way to have the Y-axis to do it automatically, but if your data is being input into the recharts as ints you can add tickFormatter to the Y-axis tab. You can have tickFormatter to equal a function that takes in 1 variable which will be the Y-axis tick value (as an int) and return the number in the format you want it.

this function takes in the Y-axis as a int and returns it as a string

const DataFormater = (number) => {
  if(number > 1000000000){
    return (number/1000000000).toString() + 'B';
  }else if(number > 1000000){
    return (number/1000000).toString() + 'M';
  }else if(number > 1000){
    return (number/1000).toString() + 'K';
  }else{
    return number.toString();
  }
}

in area chart <YAxis tickFormatter={DataFormater}/>

Answer 2

You can also use JS standard library to achieve similar function

<YAxis tickFormatter={(value) => new Intl.NumberFormat('en', { notation: "compact", compactDisplay: "short" }).format(value)} />

new Intl.NumberFormat('en-GB', {
  notation: "compact",
  compactDisplay: "short"
}).format(987654321);
// → 988M