Color 2 Areas underlines in Recharts without mixing colors caused by the Opacity

This is how to separate the charts areas color when dealing with recharts,

I'm using react with material-ui theme ( the useTheme line 🙄 )

U need to create 3 areas for the 2 lines,
this method work only when u know that 1 line is always on top

function RevenueChart({ data }: RevenueChartProps) {
  const theme = useTheme();
  return (
    <div style={{ height: 300, width: '100%' }}>
      <ResponsiveContainer>
        <AreaChart
          width={730}
          height={250}
          data={data}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <XAxis dataKey="name" tick={{ fill: theme.palette.text.hint }} />
          <YAxis tick={{ fill: theme.palette.text.hint }} />
          <CartesianGrid strokeDasharray="3 3" />
          <Area
            activeDot={false}
            dot={false}
            strokeWidth={0}
            type="monotone"
            dataKey="diff"
            stroke={theme.palette.primary.main}
            fillOpacity={0.6}
            fill={lighten(theme.palette.primary.main, 0.2)}
          />
          <Area
            activeDot={{ r: 8, fill: theme.palette.primary.main }}
            strokeWidth={2}
            type="monotone"
            dataKey="incomes"
            stroke={theme.palette.primary.main}
            fillOpacity={0}
            dot
          />
          <Area
            activeDot={{ r: 8, fill: '#ea6b78' }}
            strokeWidth={2}
            type="monotone"
            dataKey="outcomes"
            stroke="#ea6b78"
            fillOpacity={0.6}
            fill={lighten('#ea6b78', 0.2)}
            dot
          />
          <Tooltip content={<CustomContent />} />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

the data prop has the form of:

type data = {
  incomes: Array<Numbers>,
  outcomes: Array<Numbers>,
  diff: Array<Array<Number, Number>>,
}

the incomes & outcomes are clearly just your data,
the diff is an array of arrays, the ith inner array is formed by [ incomes[i], outcomes[i] ] as u can see incomes is on top so it's the start point & outcomes is in the bottom, the end.

the components are created in this form:

<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0.6}
    fill={lighten(theme.palette.primary.main, 0.2)}
    ...
    />

the colored area between the lines has no stroke (strokeWidth = 0) but has a fill color (opacity != 0),

<Area
    ...
    strokeWidth={2}
    dataKey="diff"
    fillOpacity={0}
    ...
    />

the top line have no fill color (opacity = 0) but have stroke (strokeWidth != 0),

and the bottom line can have both

The main idea is that Area component can take data as an array of start & end limits