Unequal Y Axis Point in Recharts Library of React.js - reactjs

Question

I wants to know that if there is any way to plot unequal scale of Y Axis in the Recharts Library of React.js
Like in the example in the image
Link for the image: https://i.stack.imgur.com/ZyF49.png
it is an example of Stacked Bar Charts
Area of all the bars will be same but their values on y axis will be different
like for red it will be 0 - 70
yellow 70 - 80
lightgreen 80 - 90
green 90 - 100
but their height should be same only their value will be different
const data = [
{
name: "Page A",
uv: 10
},
{
name: "Page B",
uv: 20
},
{
name: "Page C",
uv: 30
},
{
name: "Page D",
uv: 40
},
{
name: "Page E",
uv: 50
},
{
name: "Page F",
uv: 60
},
{
name: "Page G",
uv: 70
},
{
name: "Page H",
uv: 80
},
{
name: "Page I",
uv: 90
},
{
name: "Page J",
uv: 100
}
];
export default function App() {
return (
<ComposedChart
width={500}
height={400}
data={data}
>
<CartesianGrid stroke="#f5f5f5" />
<XAxis dataKey="name" scale="band" />
<YAxis domain={[0,100]} />
<Tooltip />
<Legend />
<Bar dataKey="uv" barSize={20} fill="#413ea0" />
</ComposedChart>
);
}