Different charts with recharts

chartsWithRechart.js

import {
  BarChart as RechartBarChart,
  Bar,
  XAxis,
  YAxis,
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
} from "recharts";

const barData = [{ name: "1", a: 50, b: 20, c: 10 }];
const lineData = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

const StackedVerticalBarChart = () => {
  return (
    <RechartBarChart
      layout="vertical"
      width={600}
      height={50}
      data={barData}
      margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
    >
      <XAxis hide type="number" />
      <YAxis hide dataKey="name" type="category" />
      <Bar dataKey="a" stackId="a" fill="#8884d8" radius={[10, 0, 0, 10]} barSize={8} />
      <Bar dataKey="b" stackId="a" fill="#82ca9d" barSize={8} />
      <Bar dataKey="c" stackId="a" fill="black" radius={[0, 10, 10, 0]} barSize={8} />
    </RechartBarChart>
  );
};

const LineChart = () => {
  return (
    <ResponsiveContainer width="99%" aspect={2.5}>
      <AreaChart data={lineData}>
        <defs>
          <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
            <stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
          </linearGradient>
        </defs>

        <XAxis dataKey="name" axisLine={false} tickLine={false} orientation="top" />
        <YAxis axisLine={false} tickLine={false} hide />
        <CartesianGrid strokeDasharray="3 3" horizontal={false} />

        <Tooltip />
        <Area type="monotone" dataKey="pv" stroke="#82ca9d" fillOpacity={1} fill="url(#colorPv)" />
      </AreaChart>
    </ResponsiveContainer>
  );
};

export { StackedVerticalBarChart, LineChart };