Recharts set Y-axis range

Can't figure out how to set the range of Y-axis using

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

6 Answers

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

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

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

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.

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

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