Untitled

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { Card, CardContent } from '@/components/ui/card';

const data = [
  { number: '1', category: 'Travel', situation: 80, action: 70, goal: 90 },
  { number: '2', category: 'Career', situation: 85, action: 80, goal: 95 },
  { number: '3', category: 'Personal Development', situation: 75, action: 85, goal: 90 },
];

const GoalsChart = () => {
  return (
    <Card className="p-4 m-4 bg-white shadow-md rounded-2xl">
      <CardContent>
        <h2 className="text-xl font-bold mb-4">Personal Growth and Goals Chart</h2>
        <ResponsiveContainer width="100%" height={400}>
          <BarChart data={data} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="number" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="situation" fill="#8884d8" />
            <Bar dataKey="action" fill="#82ca9d" />
            <Bar dataKey="goal" fill="#ffc658" />
          </BarChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
};

export default GoalsChart;