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

Answer 1

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)]} />

Answer 2

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} />

Answer 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

Answer 4

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']} />

Answer 5

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.

Answer 6

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]} />