How to normalize Recharts ComposedChart with one dataKey significantly greater than other - recharts

Question

I'm wondering if it's possible to "normalize" dataset value for multiple rechart instances (let's say Area and Bar).
The problem is that my dataset is a monthly Stats chart for orders income and amount. And one value is significantly greater than the other.
Example data looks:
{
income: 5050,
amount: 3,
},
{
income: 8600,
amount: 5,
},
Component (simplified)
<ComposedChart data={daysData}>
<Area dataKey="income" />
<Bar dataKey="amount" />
</ComposedChart>
This results in Bar chart barely visible on charts.
I would like bars to be for example half of the container height despite the original value is low.
I could manually multiple amount by 1000 and somehow transform tooltip values, but this is not a stable solution, because amounts could be measured in hundreds of thousands or even millions

Answer 1

As a temporary solution, I wrote simple normalizing functions. It works but doesn't seem right.
Is it anything similar in functionality I could do with native recharts params?
const daysDataNormalized = useMemo(() => {
const greatestIncome = daysData.reduce((acc, x) => (acc.income > x.income ? acc : x)).income;
const greatestAmount = daysData.reduce((acc, x) => (acc.amount > x.amount ? acc : x)).amount;
const multiplier = greatestIncome / greatestAmount / 2;
return daysData.map((stat) => ({
name: stat.name,
income: stat.income,
amount: stat.amount * multiplier,
amountTooltip: stat.amount,
}));
}, [daysData]);
const TooltipFormater = (value, name, props) => {
if (name === 'amount') {
return value;
}
if (name === 'income') {
return props.payload.amountTooltip;
}
};