Skip to main content
Version: v6.8.1

Stacked Area Chart

Stacked Area Chart

Preview

Stacked Area Chart preview

Code

src/app/shared/chart-widgets/stacked-area-chart.tsx
'use client';

import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
} from 'recharts';
import { CustomTooltip } from '@/components/charts/custom-tooltip';

export default function StackedAreaChart() {
return (
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={data}
margin={{
left: -20,
}}
className="[&_.recharts-cartesian-grid-vertical]:opacity-0"
>
<defs>
<linearGradient id="stackedAreaChart1" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="#3872FA"
className="[stop-opacity:0.4] dark:[stop-opacity:0.3]"
/>
<stop offset="95%" stopColor={'#3872FA'} stopOpacity={0} />
</linearGradient>
<linearGradient id="stackedAreaChart2" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="#10b981"
className="[stop-opacity:0.4] dark:[stop-opacity:0.3]"
/>
<stop offset="95%" stopColor={'#10b981'} stopOpacity={0} />
</linearGradient>
<linearGradient id="stackedAreaChart3" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="#eab308"
className="[stop-opacity:0.4] dark:[stop-opacity:0.3]"
/>
<stop offset="95%" stopColor={'#eab308'} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip content={<CustomTooltip />} />
<Area
type="monotone"
dataKey="uv"
stackId="1"
strokeWidth={2}
stroke="#3872FA"
// fill="#3872FA"
fill="url(#stackedAreaChart1)"
// fillOpacity={0.5}
/>
<Area
type="monotone"
dataKey="pv"
stackId="1"
strokeWidth={2}
stroke="#10b981"
// fill="#10b981"
fill="url(#stackedAreaChart2)"
// fillOpacity={0.5}
/>
<Area
type="monotone"
dataKey="amt"
stackId="1"
stroke="#eab308"
strokeWidth={2}
// fill="#eab308"
fill="url(#stackedAreaChart3)"
// fillOpacity={0.5}
/>
</AreaChart>
</ResponsiveContainer>
);
}