I am using recharts.js in react.js with the functional component. The expected result is to get equal spacing between 20-50 , 50-80 , 80-100 percent as shown in the image below:

You might have noticed the spacing between each tick is equal. But in my case I am getting the output in my browser is like this one:

Please tell me how can I achieve the same thing.My code is here below:

activity.json file

[
    {
        "day" : "Sat",
        "level": 70
    },
    {
        "day" : "Sun",
        "level": 50
    },
    {
        "day" : "Mon",
        "level": 82
    },
    {
        "day" : "Tue",
        "level": 80
    },
    {
        "day" : "Wed",
        "level": 70
    },
    {
        "day" : "Thu",
        "level": 90
    },
    {
        "day" : "Fri",
        "level": 100
    }
]

chart.js file

import activity from "../../activity.json";

<ResponsiveContainer width="100%" height={170}>
  <AreaChart data={activity}>
     <defs>
       <linearGradient id="color" x1="0" x2="0" y1="0" y2="1">
         <stop offset="0%" stopColor="#4DC591" stopOpacity="0.4"></stop>
         <stop offset="90%" stopColor="#4DC591" stopOpacity="0.05"></stop>
       </linearGradient>
     </defs>
     <Area type="monotone" dataKey="level" stroke="#4DC591" fill="url(#color)" />
     <XAxis dataKey="day" axisLine={false} tickLine={false} minTickGap={20} />
     <YAxis dx={-17} dataKey="level" axisLine={false} tickLine={false} ticks={[20 , 50 , 80 , 100]}  tickFormatter={(number) => {return number + "%"}}  interval={0} domain={[20, 'dataMax']} />
     <Tooltip />
     <CartesianGrid vertical={false} opacity={0.4} strokeDasharray="3 3" />
  </AreaChart>
</ResponsiveContainer>