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
Top comments (0)