Area Chart

Area Chart

Preview

Code

src/app/shared/analytics-dashboard/acquisition.tsx

'use client';

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

export default function AreaChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <AreaChart
        data={data}
        margin={{
          left: -30,
        }}
      >
        <XAxis dataKey="day" tickLine={false} />
        <YAxis tickLine={false} />
        <Tooltip content={<CustomTooltip />} />
        <Area
          type="natural"
          dataKey="bounceRate"
          stackId="acquisitionStackID"
          stroke="#015DE1"
          fill="#015DE1"
          strokeWidth={1.5}
          fillOpacity={0.7}
        />
        <Area
          type="natural"
          dataKey="pageSession"
          stackId="acquisitionStackID"
          stroke="#69B2F8"
          fill="#69B2F8"
          strokeWidth={1.5}
          fillOpacity={0.7}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}