Untitled
unknown
plain_text
25 days ago
1.3 kB
2
Indexable
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;
Editor is loading...
Leave a Comment