Bar Chart

Bar Chart

Preview

Code

src/app/shared/chart-widgets/simple-bar-chart.tsx

'use client';

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import { CustomTooltip } from '@/components/charts/custom-tooltip';
import { RoundedTopBarFill } from '@/components/charts/rounded-topbar';

export default function SimpleBarChart() {
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        barSize={isMediumScreen ? 18 : 24}
        margin={{
          left: -10,
        }}
        className="[&_.recharts-cartesian-grid-vertical]:opacity-0"
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis tickLine={false} dataKey="name" />
        <YAxis tickLine={false} />
        <Tooltip content={<CustomTooltip />} />
        <Legend />
        <Bar dataKey="pv" fill="#5a5fd7" shape={<RoundedTopBarFill />} />
        <Bar dataKey="uv" fill="#10b981" shape={<RoundedTopBarFill />} />
      </BarChart>
    </ResponsiveContainer>
  );
}