Recharts set Y-axis range

reactjs recharts
Mathias Asberg picture Mathias Asberg · Apr 28, 2018 · Viewed 30.5k times · Source

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.

Recharts

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

Answer

Gautam Naik picture Gautam Naik · Apr 28, 2018

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

Related questions

Set height and width for responsive chart using recharts ( Barchart )

I am trying to use recharts to implement a BarChart. But the width={600} and height={300} causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one? I tried using percentage as width={'50%"} height={"40%"} but …

Read More
Recharts Responsive Container does not resize correctly in flexbox

I'm trying to create a custom collapsable legend for my data visualization app. It uses react and recharts. the component renders nicely the first time. But when I collapse the legend and reopen it, the responsive container doesn't shrink to …

Read More
Rechart - adding labels to charts

I'm trying to learn how to use Rechart. The documentation says you can put labels on chart elements, and gives an example of how to do it using 'name' as the label data key. I've tried to do that in …

Read More