Hello All,
I am following the tutorial below and I'm at around 2 hours and 37 minutes:
https://www.youtube.com/watch?v=uoJ0Tv-BFcQ&t=9445s
I am wondering why my charts aren't showing for recharts when my code below is as follows:
import DashboardBox from '@/components/Dashboard';
import { useMemo } from 'react';
import { useGetKpisQuery } from '../../state/api';
import { ResponsiveContainer,
AreaChart,
XAxis,
YAxis,
Tooltip,
Area,} from 'recharts';
import { useTheme } from '@mui/material';
const Row1 = () => {
const {palette} = useTheme();
const {data} = useGetKpisQuery();
const revenueExpenses = useMemo(()=>{
return(
data &&
data[0].monthlyData.map(({month,revenue,expenses}) =>
{
return{
name:month.substring(0,3),
revenue: revenue,
expenses: expenses,
};
})
);
}, [data]);
return (
<>
<DashboardBox gridArea="a">
<ResponsiveContainer width="100%" height="100%">
<AreaChart
width={500}
height={400}
data={revenueExpenses}
margin={{
top: 15,
right: 25,
left: -10,
bottom: 60,
}}
>
<defs>
<linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={palette.primary[300]}
stopOpacity={0.5}
/>
<stop
offset="95%"
stopColor={palette.primary[300]}
stopOpacity={0}
/>
</linearGradient>
<linearGradient id="colorExpenses" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor={palette.primary[300]}
stopOpacity={0.5}
/>
<stop
offset="95%"
stopColor={palette.primary[300]}
stopOpacity={0}
/>
</linearGradient>
</defs>
<XAxis
dataKey="name"
tickLine={false}
style={{ fontSize: "10px" }}
/>
<YAxis
tickLine={false}
axisLine={{ strokeWidth: "0" }}
style={{ fontSize: "10px" }}
domain={[8000, 23000]}
/>
<Tooltip />
<Area
type="monotone"
dataKey="revenue"
dot={true}
stroke={palette.primary.main}
fillOpacity={1}
fill="url(#colorRevenue)"
/>
<Area
type="monotone"
dataKey="expenses"
dot={true}
stroke={palette.primary.main}
fillOpacity={1}
fill="url(#colorExpenses)"
/>
</AreaChart>
</ResponsiveContainer>
</DashboardBox>
<DashboardBox gridArea="b"></DashboardBox>
<DashboardBox gridArea="c"></DashboardBox>
</>
)
}
export default Row1;
What I have tried:
I have tried reviewing the code from the source at:
[
https://recharts.org/en-US/examples/SimpleAreaChart]
I have tried reviewing differences between my project's source on github at:
finance-app/client/src/scenes/dashboard/Row1.tsx at master · ed-roh/finance-app · GitHub
I have tested reinstalling recharts using npm, and I verified in my package.json file that I had installed it correctly the first time.
And I have tried reviewing answers on stackoverflow, but the it seems the resolutions they have made do not apply.