Recharts set Y-axis range

Question

Can't figure out how to set the range of Y-axis using http://recharts.org/

Want the Y-axis to display 100 in it's range instead of current 60.

Belive code example is not needed or fill purpose in this specific case

score 125 · Accepted Answer · answered Apr 28 '18 at 18:07

On YAxis component set the domain value from 0 to 100(or whatever u want)

 <YAxis type="number" domain={[0, 20000]}/>

Check this fiddle Link

Domain DEFAULT: [0, 'auto']

Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number. If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.

FORMAT:

<YAxis type="number" domain={['dataMin', 'dataMax']} />
<YAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="number" domain={['auto', 'auto']} />
<YAxis type="number" domain={[0, 'dataMax + 1000']} />
<YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />

That worked out perfectly. It was the "domain" name that confused me when reading the documentation. Thank you for a great answer — Mathias Asberg, May 02 '18 at 10:40
What to do if i want interval should be in difference on 100 — Kunal Burangi, Sep 26 '19 at 05:47

score 17 · Answer 2 · answered Sep 01 '20 at 06:03

If the values of the chart exceed the customized domain range, then the domain boundaries set get ignored. I've had this problem because I use custom shapes, where negative values get stacked like positive values on top (but in a different color). Specifying the domain={[0, 'dataMax + 1000']} did not work, as the y axis still showed negative numbers – untill i set allowDataOverflow={true}

<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />

score 3 · Answer 3 · answered Nov 07 '19 at 10:23

3

One more thing about this

"type" can be of 2 types 'number', 'category'

domain will be applied for only number type of axis.

if domain is not getting applied then check your axis type

answered Nov 07 '19 at 10:23

Bhagawat Dongre

99
5

Don't use a string when you want a number! – plexus-creator Feb 10 '22 at 23:36

score 3 · Answer 4 · answered Sep 27 '21 at 08:58

3

if issue is still there it might be because of axis values is string types.

manually typecast your values to number it might get resolved.

answered Sep 27 '21 at 08:58

Vikas Sharma

31
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 27 '21 at 09:51

score 1 · Answer 5 · answered May 27 '20 at 22:42

1

Suppose you are drawing a multiline graph and have custom YAxis on calculation.

So, You can define custom dataKey out of data then

   <YAxis type="number" 
           dataKey={(v)=>parseInt(v.someValue)}
           domain={[0, 'dataMax+100']} />

answered May 27 '20 at 22:42

Ajay Kumar

4,864
1
41
44

score 1 · Answer 6 · answered Sep 03 '22 at 11:27

After much experimenting, I wrote custom code to calculate the YAxis maximum value as follows:

const [yAxisMax, setYAxisMax] = useState(100);

.....
// json fetch here, and stored in 'data'
let currentMonthMax = Math.max(...data.map((o) => o.CurrentMonth)); // if the array has a custom object that contains 'CurrentMonth'
setYAxisMax(max * 1.1); // increase yaxis by 1.1%

.....

<YAxis type="number" domain={[0, yAxisMax]} />

Recharts set Y-axis range

6 Answers6